CSS浮动元素的文字换行

Question

我有一个固定宽度的侧边栏，其中包含一个Bootstrap nav-list，其中一些列表元素具有右对齐标签。

例如：

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

然而，如果链接很长，则此方法无效。链接会扩展到填满整行，并将标签推到下一行。

我在jsFiddle演示中展示了这种行为。 编辑：现在有一个gist。

期望的行为是，abc_test_randomrandom和0000在同一行上，如果必要，长字符串换行到下一行。是否可能实现？

- rouge8

Answer 1

是的。使用固定宽度，并为超出部分使用text-ellipsis和overflow: hidden;。

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

我无法打开jsFiddle，因此无法查看确切的问题。

- Praveen Kumar Purushothaman

---

这并不像他们要求的那样将多余的文本换行，而只是用省略号截断了它...? 另外，为了兼容IE7，每当使用display: inline-block时，您需要添加*display: inline; *zoom: 1;，因为IE7不识别该显示类型。 - Tim Franklin

这确实没有包装文本，但我认为用省略号并通过鼠标悬停展开实际上比我最初想要的更好。 - rouge8

Answer 2

在Bootstrap中，pull-right本质上只是CSS浮动的包装器。您需要在标记中将0000 span放在abc_test_randomrandom之前，并根据需要将其包装到链接的两行中，以便您的浮动元素出现在浮动周围的元素之前。您可能需要设置链接的margin-right为您浮动元素的宽度。我无法让jsFiddle正常加载，否则我会给您一个更好的示例。我会尝试回来检查。

编辑：我能够加载您的jsFiddle。

如果您将HTML中的span移至anchor之前并添加此CSS，则可以使用此方法。如果您的文本实际上将包含下划线而不是空格，则需要您在自己的答案中提到的word-wrap CSS。

这样做的好处是，它不需要CSS hack（即对于display:inline-block）才能在旧版本的IE中工作，如果这是您项目的问题。

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

- Tim Franklin

Answer 3

我认为Praveen的解决方案实际上是更好的实现方法，但为了获得最初请求的行为，需要使用display: inline-block，word-wrap: break-word并设置width即可解决问题。

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

- rouge8