Html 有没有办法在 div 中对长单词进行自动换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1638223/
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
Is there a way to word-wrap long words in a div?
提问by rutherford
I know Internet Explorer has a word-wrap style, but I'd like to know if there is a cross-browser method of doing so to text in a div.
我知道 Internet Explorer 有自动换行样式，但我想知道是否有跨浏览器的方法来处理 div 中的文本。
Preferably CSS but JavaScript snippets would work ok too.
最好是 CSS，但 JavaScript 片段也可以正常工作。
edit: Yeah, referring to long strings, cheers folks!
编辑：是的，指的是长字符串，伙计们！
回答by Aaron Bennett
Reading the original comment, rutherford is looking for a cross-browserway to wrap unbrokentext (inferred by his use of word-wrap for IE, designed to break unbroken strings).
阅读原始评论时，rutherford 正在寻找一种跨浏览器的方式来包装完整的文本（通过他对 IE 使用自动换行来推断，旨在打破完整的字符串）。
/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
I've used this class for a bit now, and works like a charm. (note: I've only tested in FireFox and IE)
我已经使用了这个课程一段时间了，它的作用就像一个魅力。（注意：我只在 FireFox 和 IE 中测试过）
回答by Paul Zahra
Most of the previous answer didn't work for me in Firefox 38.0.5. This did...
以前的大部分答案在 Firefox 38.0.5 中对我不起作用。这确实...
<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
// Content goes here
</div>
Documentation:
文档：
回答by NVI
回答by Hugo
Aaron Bennet's solution is working perfectly for me, but i had to remove this line from his code --> white-space: -pre-wrap;beacause it was giving an error, so the final working code is the following:
Aaron Bennet 的解决方案对我来说非常有效，但我不得不从他的代码中删除这一行 -->white-space: -pre-wrap;因为它给出了一个错误，所以最终的工作代码如下：
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
thank you very much
非常感谢您
回答by DA.
As david mentions, DIVs dowrap words by default.
正如 david 所提到的，默认情况下DIV会自动换行。
If you are referring to really long strings of text without spaces, what I do is process the string server-side and insert empty spans:
如果您指的是没有空格的非常长的文本字符串，我所做的是处理字符串服务器端并插入空跨度：
thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace
It's not exact as there are issues with font-sizing and such. The span option works if the container is variable in size. If it's a fixed width container, you could just go ahead and insert line breaks.
这并不准确，因为存在字体大小等问题。如果容器的大小可变，则 span 选项有效。如果它是一个固定宽度的容器，你可以继续插入换行符。
回答by Slevin
You can try specifying a width for the div, whether it be in pixels, percentages or ems, and at that point the div will remain that width and the text will wrap automatically then within the div.
您可以尝试为 div 指定宽度，无论是以像素、百分比还是 em 为单位，此时 div 将保持该宽度并且文本将自动换行然后在 div 内。
