CSS如何限制文本换行？

Question

我有一个可能有些奇怪的任务，但我相信这没有更好的解决办法。我需要在某个可变宽度的容器中放置<ul>，其中包含一些具有固定宽度的内联<li>元素。我应该（并已经找到了解决方案）在具有相同宽度的<li>元素之间放置空格。空格的宽度是动态变化的，并取决于父容器的宽度。再次提醒，这些<li>项具有固定宽度。

我还应该在上述元素之上放置一些链接。出于某种原因，链接必须位于其他<ul>元素中。它们也被包装在内联的<li>元素中。而且我希望它们位于上述<li>项目正上方。这可以通过设置<li>元素的固定宽度来实现。现在，问题是每个链接中的文本实际上具有不同的宽度，并将分为两行，但我必须将其放置在一行中。

所以我想欺骗浏览器：文本将溢出<li>元素。

.liElem {
  width: 100px;
  height: 20px;
  overflow: visible;
}

但是，正如您所猜测的那样，文本被分成了两行，并且实际上溢出到了列表项底部，而不是右侧。

我想要的效果可以通过在文本中插入 而不是空格来实现，就像这样：<li><a href="#">添加&nbsp;到&nbsp;收藏夹</a></li>。

因此，我的问题是：如何使用CSS方式使普通文本不在多个行中断？

- Dmitry Kankalovich

---

你在CSS中设置了width: 100px;，所以如果行的宽度超过100px，文本将被分成几行，因此可能不需要设置宽度。或者你可以使用white-space:nowrap;属性。 - Shreedhar

我必须让列表项具有固定的宽度。正如我所说，我想欺骗浏览器，让它认为它将使用固定宽度来定位元素。 - Dmitry Kankalovich

Answer 1

.nobr  { white-space:nowrap; }

- Celeritas

---

谢谢！你太棒了！ - YTG