如何防止换行在列表项使用CSS

我试图在菜单中使用li标记放置一个名为提交简历的链接。由于两个单词之间有空格，它被换行为两行。如何防止这种包装与CSS?

447255 次浏览
小开
最佳答案

使用white-space: nowrap;[1] [2]或通过设置li的宽度为更大的值来给链接更多的空间。

[1] §3。空格和换行:空格属性- W3 CSS文本模块3级
[2] < /一口> # EYZ0

小开

如果你想有选择地实现这一点(即:只到那个特定的链接)，你可以使用一个不间断的空格来代替普通的空格:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

编辑:我知道这是HTML，而不是OP要求的CSS，但有些人可能会发现它很有用…

小开

如果内容太大，不能放在一行中，你可以添加这一小段代码，在行末添加一个漂亮的“…”:

li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
小开

display: inline-block;将防止列表项中的单词之间的中断:

li {
display: inline-block;
}
小开

Bootstrap 4有一个名为text-nowrap的类。这正是你所需要的。

小开

在CSS中，空白可以完成这项工作

可能的值:

white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal

提交答案