twitter-bootstrap 带有浮动元素的 CSS 自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14633224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS word wrap with floating elements
提问by rouge8
I have a fixed-width sidebar consisting of a bootstrap nav-listwhere some list elements have right-aligned labels.
我有一个固定宽度的侧边栏，由一个引导程序组成，nav-list其中一些列表元素具有右对齐的标签。
For example:
例如：
<li>
<a href="#">abc_test_randomrandom</a>
<span class="pull-right label">0000</span>
</li>
However, this doesn't work if the link is long. It expands to fill the whole line, and pushes the label to the next line.
但是，如果链接很长，这将不起作用。它扩展以填满整行，并将标签推到下一行。
I've put up a jsFiddle demoto demonstrate this behavior. EDIT:And now a gisttoo.
我已经提供了一个jsFiddle 演示来演示这种行为。编辑：现在也是一个要点。
The desired behavior is abc_test_randomrandomand 0000on the same line, with the long string wrapping to the next line if necessary. Is this possible?
所需的行为是abc_test_randomrandom和0000在同一行上，如有必要，长字符串会换行到下一行。这可能吗？
采纳答案by rouge8
I think Praveen's solutionis actually a better implementation, but to get the behavior originally requested, display: inline-block, word-wrap: break-wordand setting the widthfixes it.
我认为Praveen 的解决方案实际上是一个更好的实现，但是为了获得最初请求的行为display: inline-block，word-wrap: break-word并设置width修复它。
li a {width: 70%; display: inline-block; word-wrap: break-word;}
回答by Praveen Kumar Purushothaman
Yes. Use a fixed width and give overflow: hidden;for the excess with text-ellipsis.
是的。使用固定宽度并用 给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;}
I am unable to open jsFiddle. So couldn't see the exact issue.
我无法打开 jsFiddle。所以看不到确切的问题。
回答by Tim Franklin
In Bootstrap a pull-right is essentially just a wrapper for CSS float. You need to put the 0000 span before the abc_test_randomrandom in the markup and it should wrap the anchor to two lines as needed, so your floating element comes before the element it's floating around. You may need to set a margin-right of the anchor to be the width of your floated element. I can't get jsFiddle to load right now or else I'd give you a better example. I'll try checking back.
在 Bootstrap 中，右拉本质上只是 CSS 浮动的包装器。您需要在标记中的 abc_test_randomrandom 之前放置 0000 跨度，并且它应该根据需要将锚点包装成两行，因此您的浮动元素位于它周围浮动的元素之前。您可能需要将锚点的边距设置为浮动元素的宽度。我现在无法让 jsFiddle 加载，否则我会给你一个更好的例子。我会试着回来看看。
EDIT: I was able to get your jsFiddle to load.
编辑：我能够让你的 jsFiddle 加载。
If you move the spans before the anchors in your HTML and add this CSS, this works. If your text is literally going to have underscores instead of spaces then you'll need the word-wrap CSS that you mentioned in your own answer.
如果您在 HTML 中的锚点之前移动跨度并添加此 CSS，这将起作用。如果您的文本实际上将使用下划线而不是空格，那么您将需要您在自己的答案中提到的自动换行 CSS。
The benefit of this is it doesn't require CSS hacks (i.e. for display: inline-block) to work in older versions of IE, if that's a concern for your project.
这样做的好处是它不需要 CSS hacks（即用于显示：inline-block）在旧版本的 IE 中工作，如果这对您的项目来说是一个问题。
.nav-list a { display: block; margin-right: 30px; }
