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

【问题标题】：How to prevent line breaks in list items using CSS如何使用 CSS 防止列表项中的换行符
【发布时间】：2010-11-25 20:53:57
【问题描述】：

我正在尝试使用li 标记将名为提交简历 的链接放入菜单中。由于两个单词之间的空格，它换成了两行。如何用 CSS 防止这种包装？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果内容太大而不能放在一行，你可以添加这个小sn-p代码来在行尾添加一个漂亮的“…”：

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

【讨论】：

【解决方案3】：

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

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

编辑：我知道这是 HTML，而不是 OP 要求的 CSS，但有些人可能会觉得它有帮助……

【讨论】：

【解决方案4】：

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

li {
  display: inline-block;
}

【讨论】：

【解决方案5】：

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

【讨论】：