CSS方式限制文本的换行符

Question

我可能有点奇怪的任务,但我相信没有更好的解决方案.我需要<ul>在一些宽度可更改的容器中使用<li>固定宽度的内联元素.我应该(已经找到解决方案)在<li>相同宽度的元素之间放置空格.空间宽度是动态变化,取决于父容器宽度.同样,这个<li>项目有固定的宽度.

我还应该在这个描述的元素之上放置一些链接.由于某些原因,链接必须在其他<ul>元素中.它们也包裹着内联<li>元素.我希望它们位于所描述的<li>项目正上方.这可以通过<li>如上设置固定宽度的项目来完成.现在,问题是每个链接中的文本实际上具有不同的宽度并且会分成两行,但我必须将它放在一行中.

所以我想欺骗浏览器:文本将溢出<li>项目.

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

但是,正如您可能猜到的那样,文本分为两行,实际上是列表项的底部,而不是右侧.

我想要的效果可以通过 在文本中插入空格来完成:<li><a href="#">Add&nbsp;to&nbsp;Favourites</a></li>.

所以,我的问题是:如何以css方式使通常的文字不要分成几行？

Answer 1

.nobr  { white-space:nowrap; }