css - 带有浮动元素的 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

是的。使用固定宽度并overflow: hidden;用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 中，右拉实际上只是 CSS 浮动的包装器。您需要将 0000 跨度放在标记中的 abc_test_randomrandom 之前，它应该根据需要将锚点包裹到两行，因此您的浮动元素位于它浮动的元素之前。您可能需要将锚的右边距设置为浮动元素的宽度。我现在无法加载 jsFiddle，否则我会给你一个更好的例子。我会尝试回来检查。

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

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

这样做的好处是它不需要 CSS hack（即用于显示：inline-block）在旧版本的 IE 中工作，如果这对您的项目来说是一个问题的话。

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

Answer 3

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

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