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

Question

我正在尝试使用 li 标记在菜单中放置一个名为“提交简历”的链接。由于两个单词之间有空格，它会换行为两行。如何用 CSS 防止这种换行？

Answer 1

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

---

^[1] § 3. 白色空格和换行：空白属性 - W3 CSS 文本模块级别 3
^[2] 空白 - CSS ：级联样式表| MDN

Answer 2

如果内容太大而无法容纳在一行中，您可以添加这一小段代码，以在行末尾添加一个漂亮的“...”：

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

Answer 3

如果您想有选择地实现此目的（即：仅针对该特定链接），您可以使用不间断空格而不是普通空格：

<li>submit resume</li>

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

编辑：我知道这是 HTML，而不是 OP 所要求的 CSS ，但有些人可能会发现它有帮助......

Answer 4

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

li {
  display: inline-block;
}

Answer 5

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

Answer 6

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

可能的值：

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

Answer 7

your text （不是 css，但在某些情况下更容易）