我无法使用自动换行来处理这个例子......
<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 strict和transitional,都没有用.
Ste*_*cil 90
加:
display: inline-block;
你的风格td.
加:
display: inline-block;
word-break: break-word;
你的风格td.
注意:请
注意,就目前而言,break-word它不是webkit标准规范的一部分; 因此,您可能有兴趣使用break-all相反.这种替代价值提供了无疑是极为激烈的解决方案; 但是,它符合标准.
加:
display: inline-block;
word-break: break-word;
你的风格td.
上一段以类似的方式适用于Opera.
Sun*_*S.M 38
使用适用于所有浏览器的代码(取自css-tricks)
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;
Far*_*eed 36
工作休息与inline-block.
确保您指定width并注意父节点中是否有任何覆盖属性。确保没有white-space: nowrap.
看到这个代码笔
<html>
<head>
</head>
<body>
<style scoped>
.parent {
width: 100vw;
}
p {
border: 1px dashed black;
padding: 1em;
font-size: calc(0.6vw + 0.6em);
direction: ltr;
width: 30vw;
margin:auto;
text-align:justify;
word-break: break-word;
white-space: pre-line;
overflow-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
}
</style>
<div class="parent">
<p>
Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
the standard.
</p>
</div>
</body>
</html>这种属性的组合对我有帮助:
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;