在这个例子中,单词换行符不起作用

我无法使用自动换行来处理这个例子

<html> <head></head> <body> <table style="table-layout:fixed;"> <tr> <td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td> </tr> </table> </body></html> 

我记得读过布局必须指定(我做了),但除此之外,我不知道要做到这一点,我必须做什么。 我真的很想在Firefox中工作。 谢谢。

编辑:在Chrome 19和Firefox 12失败,它在IE8中工作。 我试图doctype严格和过渡,既没有工作。

Mozilla Firefox解决scheme

加:

 display: inline-block; 

以你的td的风格。

基于Webkit的浏览器( Google ChromeSafari ,…)解决scheme

加:

 display: inline-block; word-break: break-word; 

以你的td的风格。

注意:请注意,截至目前为止, break-word不是webkit标准规范的一部分; 因此,您可能有兴趣采用break-all方式。 这种替代价值提供了一个毫无疑问的解决办法。 但是,它符合标准。

Opera解决scheme

加:

 display: inline-block; word-break: break-word; 

以你的td的风格。

前面的段落以类似的方式适用于Opera。

使用此代码将在所有浏览器上工作

 overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ 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; 

这些特性的组合对我有帮助:

 display: inline-block; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; line-break: strict; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none;