CSS字包装与浮动元素

前端之家收集整理的这篇文章主要介绍了CSS字包装与浮动元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个固定宽度的侧边栏,由一个bootstrap导航列表组成,其中一些列表元素具有右对齐标签.

例如:

<li>
  <a href="#">abc_test_randomrandom</a>
  <span class="pull-right label">0000</span>
</li>

但是,如果链接很长,这不起作用.它会扩展以填充整行,并将标签推送到下一行.

我已经提出了一个jsFiddle demo来证明这种行为.编辑:现在也是gist.

所需的行为是同一行上的abc_test_randomrandom和0000,如果需要,长字符串将换行到下一行.这可能吗?

解决方法

是.使用固定宽度并给出溢出:隐藏;对于多余的文本省略号.
li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}

我无法打开jsFiddle.所以看不出确切的问题.

猜你在找的CSS相关文章