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

Question

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

Answer 1

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

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的类。这正是你所需要的。