如何使用CSS包装文字?

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td> 

我如何获得这样的文字包装在CSS

5 Solutions collect form web for “如何使用CSS包装文字?”

试着做这个。 适用于IE8,FF3.6,Chrome

 <body> <table> <tr> <td> <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div> </td> </tr> </table> </body> 

如果你input“AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG”,这将产生

 AARRRRRRRRRRRRRRRRRRRR RRGGGGGGGGGGGGGGGGGGGG G 

我已经从谷歌的几个不同的网站采取我的例子。 我已经在ff 5.0,IE 8.0和Chrome 10上testing过了。它适用于所有这些。

 .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> 

使用文本换行 ,浏览器支持相对较弱(正如您可能从草稿规范中期望​​的那样)。

您最好采取措施确保数据不会有非空白string。

这将在任何地方工作。

 <BODY> <TABLE style="table-layout:fixed;"> <TR> <TD><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></TD> </TR> </TABLE> </BODY> 

如果你不能控制用户input的话,更好的select是build立css属性, overflow:hidden ,所以如果string优于宽度,它不会使devise变形。

编辑:

我喜欢这个答案:“word-wrap:break-word”,对于那些不支持IE6或IE7的浏览器,我会使用我的解决scheme。