在这个例子中,单词换行符不起作用
我无法使用自动换行来处理这个例子
<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 Chrome , Safari ,…)解决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;