html – 限制文本换行的CSS方式

前端之家收集整理的这篇文章主要介绍了html – 限制文本换行的CSS方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我可能有点奇怪的任务,但我相信没有更好的解决方案.我需要< ul>在一些容器中,其宽度是可变的并且具有内联的< li>固定宽度的元素.我应该(并且已经找到解决方案)在< li>之间放置空格相同宽度的元素.空间宽度是动态变化,取决于父容器宽度.同样,这个< li>物品有固定的宽度.

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

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

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

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

我想要的效果可以通过插入& nbsp;来完成.在这样的文字中插入空格:< li>< a href =“#”>添加& nbsp;到& nbsp;收藏夹< / a>< / li> .

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

解决方法

.nobr  { white-space:nowrap; }

猜你在找的HTML相关文章