CSS字包装与浮动元素

Question

我有一个固定宽度的侧边栏,由一个引导程序组成,nav-list其中一些列表元素具有右对齐标签.

例如:

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

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

我已经提出了一个jsFiddle演示来演示这种行为.编辑:现在也是一个要点.

期望的行为abc_test_randomrandom,并0000在同一行,如果有必要的长字符串包装到下一行.这可能吗？

Answer 1

我认为Praveen 的解决方案实际上是一个更好的实现，但是要获得最初请求的行为，display: inline-block并word-wrap: break-word设置width修复它。

li a {width: 70%; display: inline-block; word-wrap: break-word;}