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

Question

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

原文由 Rajasekar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

---

[1] § 3. White Space and Wrapping：white-space 属性 - W3 CSS Text Module Level 3

[2] white-space - CSS：层叠样式表 | MDN

原文由 n1313 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 JimmyRare 发布，翻译遵循 CC BY-SA 4.0 许可协议