如何使用CSS避免链接文字在中间换行?

21

我有一个横向显示的项目列表,用于导航区域,但它在链接的中间换行,像这样:

| This is Item One | This is Item Two | This is Item Three | This is
Item Four | This is Item Five | 

当我想让它像这样换行:

| This is Item One | This is Item Two | This is Item Three  
| This is Item Four | This is Item Five | 

我尝试在我的链接项(li a)上使用whitespace: nowrap声明,但这只会导致第二行(折行)完全消失。


1
发布你的代码,这样我们就可以看到你尝试了什么。 - yunzen
1
如果你的修改有任何影响,那么你一定正确拼写了属性名 white-space。如果效果符合你所描述的,那么混乱是由页面上某些你没有描述的东西引起的。 - Jukka K. Korpela
3个回答

17

我相信你要找的是 white-space 属性

.menu a {
    white-space: nowrap;
}

另一种选择是给每个菜单项分配固定宽度并向左浮动。

.menu a {
    display: block;
    float: left;
    width: 200px;
}

当然,CSS的样式会根据你的HTML而有所不同。我建议将您的菜单放在一个无序列表中,并将这些样式应用于列表项。


1
助记符: "white" 和 "space" 之间用连字符隔开,"nowrap" 不会换行。 - Jon Hanna
虽然你链接到了w3schools :( 这只会鼓励人们相信他们在w3schools上读到的内容。 - Jon Hanna
2
@JonHanna 哦,你能指出那个 W3Schools 页面中的错误吗? - Mr Lister
1
不,那只会让情况变得更糟。如果我们在w3schools正确时继续链接到它们,那么人们会把它们视为资源。 - Jon Hanna
@JonHanna 嗯,我不讨厌W3Schools。他们的错误并不比其他很多“HTML教程”网站更多,所以我不知道为什么人们一直把W3Schools作为他们憎恨的目标。并不是说他们完美无缺;我确实在那个页面上发现了一个错误... - Mr Lister
显示剩余4条评论

7

在没有样式和标记可用的情况下,这是我能提供的最佳解决方案(因为我对您的问题不确定,所以这只是一个猜测):

您需要做的就是将display:inline-block应用于相应的<a>标签。


这很好,因为它还可以防止连字符后的换行。 - MDickten

2

我知道这是一个老问题,但既然没有被接受的答案,那么在今天的情况下,这里有一个答案:

现在,您可以通过将父元素设置为display:flex并将white-space:nowrap应用于子元素来解决此问题。Flex布局处理链接组的换行,链接本身则被防止了其单词换行。

<div class="link-group">
  <a class="link">First Link</a>
  <a class="link">Second Link</a>
  <a class="link">Third Link</a>
  <a class="link">Fourth Link</a>
</div>

/* parent */
.link-group {
  display: flex;
  flex-wrap: wrap;
}

/* child */
.link {
  white-space: nowrap;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接