CSS字包装与浮动元素

Question

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

例如：

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

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

我已经提出jsFiddle demo来证明这种行为。 编辑：现在也是gist。

在同一行上所需的行为是abc_test_randomrandom和0000，如果需要，长字符串将换行到下一行。这可能吗？

Answer 1

是。使用固定宽度，并使用overflow: hidden;为{>> 1}提供text-ellipsis。

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}

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

Answer 2

在Bootstrap中，pull-right基本上只是CSS float的包装器。你需要将0000跨度放在标记中的abc_test_randomrandom之前，它应该根据需要将锚点包装成两行，这样你的浮动元素就会浮动到它浮动的元素之前。您可能需要将锚点的右边距设置为浮动元素的宽度。我现在无法让jsFiddle加载，否则我会给你一个更好的例子。我会试着回来看看。

编辑：我能够让你的jsFiddle加载。

如果您在HTML中的锚点之前移动范围并添加此CSS，则此方法有效。如果您的文本确实具有下划线而不是空格，那么您将需要在自己的答案中提到的自动换行CSS。

这样做的好处是它不需要CSS hacks（即display：inline-block）在旧版本的IE中工作，如果这是你项目的一个问题。

.nav-list a { display: block; margin-right: 30px; }

Answer 3

我认为Praveen's solution实际上是一种更好的实现，但为了获得最初请求的行为，display: inline-block，word-wrap: break-word并设置width修复它。

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