Html 为什么自动换行在 CSS3 中不能正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13819390/
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
Why doesn't word-wrap work properly in CSS3?
提问by user930514
Why doesn't word wrap property work properly in the example below?
为什么在下面的示例中自动换行属性不能正常工作？
http://jsfiddle.net/k5VET/739/
http://jsfiddle.net/k5VET/739/
What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.
我该怎么做才能确保“consectetur”这个词的一部分适合第一行本身？我想要最大数量的字符适合每行。
The css is :
css是：
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-wrap:break-word;
border:2px solid; }
回答by Jason Leung
If word-wrap: break-alldon't work, try also add this:
如果word-wrap: break-all不起作用，请尝试添加以下内容：
white-space:normal;
work for me with the .btn class in Bootstrap 3
使用 Bootstrap 3 中的 .btn 类为我工作
回答by Sowmya
回答by aug
Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it's original form.
好的，所以我知道这是一个老问题，但我认真地认为可以对何时使用哪个属性进行一些有用的说明。看看现有的答案，我觉得他们提供了没有解释的解决方案，所以我试图帮助解决这个问题。对于上下文，默认情况下，容器不会尝试拆分单个长单词，因为它希望保留单词的原始形式。
With that said, 3 main ways to break up wordsthere is overflow-wrap, word-break, and hypens. I won't dive too deep into hypens though.
话虽如此overflow-wrap，分解单词的3 种主要方法是word-break、 和hypens。不过，我不会深入研究连字符。
So first off. I see word-wrapis being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap. It's probably preferred not to use that.
所以首先。我看到问题word-wrap中正在使用它，但阅读文档，该文档已被弃用，并且某些浏览器已决定将其简单地别名为overflow-wrap. 最好不要使用它。
The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrapreally only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-wordis set, it will only break up the word if the entire word couldn't be placed on that line.
这两个属性之间的区别在文档中非常清楚，但为了清楚起见，overflow-wrap实际上只有两个可能的值，并且会检测单词是否溢出。如果是，默认情况下它会将整个单词移动到下一行。如果break-word设置了，它只会在不能将整个单词放在该行上时才拆分单词。
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
overflow-wrap: break-word;
border:2px solid; }
#sp { }<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>You can see the pneumonoul... long word breaks exactly where it needs to on the next line after it attempts to separate the long word.
您可以看到 pneumonoul... 长词在尝试分隔长词后，在下一行准确地中断到它需要的位置。
Now in contrast, we have word-break. This has more granular properties and actually also has a break-wordoption. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.
现在相比之下，我们有word-break. 这具有更细粒度的属性，实际上还有一个break-word选项。这是上述代码段的同义词，因此我认为何时使用其中一个是非常微不足道的。
However, word-breakalso offers a break-allvalue which will break the word whenever possible to fit word where it was originally intended. It doesn't try to figure out if it needs the word to be on a new line or not -- it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.
但是，word-break还提供了一个break-all值，该值将在可能的情况下打破单词以适应单词最初的意图。它不会试图弄清楚它是否需要将单词放在新行上——它只是将换行符推到它溢出的地方。这里与上面最大的区别是我们使用的长词现在仍然在顶部。
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-break: break-all;
border:2px solid; }
#sp { }<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>And then finally for hyphenshave their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphensproperty hooks into the langattribute and understands what to do.
然后最后对于hyphens有自己特殊的分手方式的话。有关更多信息，请查看文档。还值得注意的是，不同的语言有不同的分解单词的方式，但幸运的是，hyphens属性挂钩到lang属性中并了解要做什么。
Another option people have suggested is using the white-spaceproperty which attempts to break up text through spaces. In the example I used, this doesn't help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn't attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.
人们建议的另一种选择是使用white-space试图通过空格拆分文本的属性。在我使用的示例中，这对我们的情况没有帮助，因为单词本身比容器长。我认为关于这个 CSS 属性需要注意的重要一点是，它不会尝试分解单词本身，而是尝试在适当的时候通过空格来分解。
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
white-space: normal;
border:2px solid; }
#sp { }<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>Hope this helps.
希望这可以帮助。
回答by Jukka K. Korpela
It does not wrap properly, because browsers do not apply automatic hyphenation (which would be the way to cause properwrapping) by default. You need to use CSS hyphenation or JavaScipt-based hyphenation. The setting word-wrap:break-word, as well as word-break: break-all, by definition breakswords (splits th em to piece s at arbit rary poin ts), instead of proper wrapping.
它没有正确换行，因为浏览器默认情况下不应用自动断字（这将是导致正确换行的方式）。您需要使用 CSS 断字或基于 JavaScipt 的断字。根据定义，设置word-wrap:break-word以及会破坏单词（在任意点 ts 处将它们拆分为 s），而不是正确的换行。word-break: break-all
回答by SebHallin
Because the css word-wrap doesn't work in all browsers, use JavaScript instead! It should give the same result.
因为 css 自动换行不适用于所有浏览器，请改用 JavaScript！它应该给出相同的结果。
The function below requires JQuery and it will run each time window re-size.
下面的函数需要 JQuery，它会在每次调整窗口大小时运行。
The function checks if the element has more width then its parent, and if it has, it breaks all instead of words only. We don't want the children to grow bigger than it's parents, right?
该函数检查元素的宽度是否大于其父元素，如果有，它会中断所有内容而不是仅中断单词。我们不希望孩子长得比父母还大，对吧？
I only needed it for tables, so if you want it in some other element, just change "table" to "#yourId" or ".yourClass". Make sure there is a parent-div or change "div" to "body" or something?
我只需要它用于表格，所以如果你想在其他元素中使用它，只需将“表格”更改为“#yourId”或“.yourClass”。确保有一个父 div 或将“div”更改为“body”或其他什么？
If it will go to else, it changes to word-break and then check if it should change back, that's why there is so much code.. :'/
如果它会转到其他，它会更改为断字，然后检查它是否应该更改回来，这就是为什么有这么多代码..:'/
$(window).on('resize',function() {
$('table').each(function(){
if($(this).width() > $(this).parent('div').width()){
$(this).css('word-break', 'break-all');
}
else{
$(this).css('word-break', 'break-word');
if($(this).width() > $(this).parent('div').width()){
$(this).css('word-break', 'break-all');
}
}
});
}).trigger('resize');
I hope it works for you!
我希望这个对你有用！
回答by Manolo
This is useful for wrapping text in one line:
这对于将文本包装在一行中很有用：
#fos {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
