Html 用 CSS 打断长字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18628038/
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
Break long word with CSS
提问by dev1234
I have a situation where there can be long words like 'hellowordsometext' or integer like '1234567891122' without any space in between. check this js please. http://jsfiddle.net/rzq5e/6/
我有一种情况，其中可以有像 'hellowordsometext' 这样的长单词或像 '1234567891122' 这样的整数，中间没有任何空格。请检查这个js。http://jsfiddle.net/rzq5e/6/
how is it possible to break it in to next line after it reach the div width. what happens now is, it spans out out along with th div
在达到 div 宽度后，如何将其分解到下一行。现在发生的是，它与 div 一起展开
<div>Solutionforentprise</div>
回答by Mr. Alien
回答by dev1234
I have found this solution my self.
我自己找到了这个解决方案。
word-break: break-all;
but it doesn't work for Opera.
但它不适用于 Opera。
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
回答by Vinay Pratap Singh
give an id or class to your div
给你的 div 一个 id 或 class
then
然后
#divid
{
width: 30px;
word-wrap: break-word;
}
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari, Opera 10.5+.
IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（例如 Chrome 和 Safari、Opera 10.5+）支持自动换行。
回答by Shareek Ahamed
Fix the size of the DIV and apply 'overflow: hidden' so it will not effect the grid size an all na.
修复 DIV 的大小并应用“溢出：隐藏”，这样它就不会影响网格大小。
div{width: 40px;
overflow: hidden;}
do you need to view entire text?
你需要查看整个文本吗？
回答by Moradnejad
The other answers have some problems with old browsers, like before Chrome 32.
其他答案在旧浏览器中存在一些问题，例如在 Chrome 32 之前。
Its better to use this code:
最好使用此代码：
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
You can also add a hyphen where the word breaks (if supported):
您还可以在单词中断处添加连字符（如果支持）：
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
.c1 {
width: 200px;
border: 1px solid;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}<div class="c1">
For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
</div>