如何使用CSS防止列表项中的换行符

Question

我正在尝试使用标记在菜单中放置一个名为Submit resume的链接li.由于两个单词之间的空白,它包含两行.如何用CSS防止这种包装？

Answer 1

使用white-space: nowrap;¹,或通过将li宽度设置为更大的值来为该链接提供更多空间.

或者只是参考Mozilla开发人员网络https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference (49认同)
您应该参考W3C而不是那些可怕且经常不正确的w3schools网站.http://www.w3.org/TR/css3-text/#white-space0 (36认同)
我使用`display:inline;`来阻止li项中的换行符.也许这也会帮助其他有类似问题的人. (4认同)
小心 display: inline 很重要，因为它可能会产生副作用。空白：nowrap；只有一种效果。 (3认同)

Answer 2

如果内容大到适合一行,你可以添加这一小段代码,在行的末尾添加一个漂亮的"...":

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

Answer 3

如果你想有选择地实现这个目标(即:只对那个特定的链接),你可以使用一个不间断的空间而不是一个普通的空间:

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

编辑:我知道这是HTML,而不是OP要求的CSS,但是有些人可能觉得它很有用......

Answer 4

display:inline-block; 将阻止列表项中的换行符

 li{
    display: inline-block;
 }

Answer 5

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