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

Posted 2023-02-19

【中文标题】如何使用 CSS 防止列表项中的换行符

【英文标题】：How to prevent line breaks in list items using CSS

【发布时间】：2010-11-25 20:53:57

【问题描述】：

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

【参考方案1】：

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

---

^[1]§ 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3 ^[2]white-space - CSS: Cascading Style Sheets | MDN

【讨论】：

我使用display: inline; 防止了 li 项中的换行符。也许这也会帮助其他有类似问题的人。

注意 display: inline 很重要，因为它可能有副作用。空白：nowrap；只有一种效果。

在这种情况下会发生文本溢出。如何预防？

【参考方案2】：

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

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

【讨论】：

我一直在寻找文本夹紧解决方案，但我会坚持这个解决方案

【参考方案3】：

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

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

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

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

【参考方案4】：

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

li 
  display: inline-block;

【讨论】：

如果我点击到 jsfiddle 并调整输出的宽度，单个列表项会在单词“list”和数字之间中断，这正是 OP 没有的 想要...

【参考方案5】：

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

【讨论】：

我宁愿避免在 2019 年推荐使用 Bootstrap。

@BrodaNoel 为什么？