如何使用 CSS 包装文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3949762/
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
How to wrap text using CSS?
提问by keruilin
<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
How do I get text like this to wrap in CSS?
如何让这样的文本包裹在 CSS 中？
回答by Stirling
If you type "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" this will produce:
如果你输入“AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGG”，这将产生：
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
I have taken my example from a couple different websites on google. I have tested this on ff 5.0, IE 8.0, and Chrome 10. It works on all of them.
我从谷歌上的几个不同网站上举了我的例子。我已经在 ff 5.0、IE 8.0 和 Chrome 10 上对此进行了测试。它适用于所有这些。
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword"></td>
</tr>
</table>
回答by Gaurav Saxena
Try doing this. Works for IE8, FF3.6, Chrome
尝试这样做。适用于 IE8、FF3.6、Chrome
<body>
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
</td>
</tr>
</table>
</body>
回答by Quentin
回答by Atul.Bajare
This will work everywhere.
这将适用于任何地方。
<body>
<table style="table-layout:fixed;">
<tr>
<td><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
</tr>
</table>
</body>
回答by netadictos
The better option if you cannot control user input, it is to establish the css property, overflow:hidden, so if the string is superior to the width, it will not deform the design.
如果你不能控制用户输入，更好的选择是建立css属性，溢出：隐藏，这样如果字符串优于宽度，它不会使设计变形。
Edited:
编辑：
I like the answer: "word-wrap: break-word", and for those browsers that do not support it, for example, IE6 or IE7, I would use my solution.
我喜欢这个答案：“word-wrap: break-word”，对于那些不支持它的浏览器，例如 IE6 或 IE7，我会使用我的解决方案。
