我正在尝试总结一个很长的词。我看过这个帖子:如何防止长单词破坏我的 div? https://stackoverflow.com/questions/320184/how-to-prevent-long-words-from-breaking-my-div
它在像这样的简单情况下效果很好:
.wrapWords
{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
<!-- This wraps correctly -->
<div style="width:145px;">
<div class="wrapWords" style="width:100%;">
<a href="#">AAAAAAAAAAAAAAAAAA</a>
</div>
<div>
但我的案例有两个像这样的嵌套表:
<!-- This doesn't work -->
<table style="width:100%;">
<tr>
<td style="width:145px;">
<table style="width:100%;">
<tr>
<td style="width:100%;">
<div class="wrapWords" style="width:100%;">
<a href="#">BBBBBBBBBBBBBBBBBB</a>
</div>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
您可以在此处测试此代码http://jsfiddle.net/ZmnQ6/4/ http://jsfiddle.net/ZmnQ6/4/
表正在采取table-layout: auto;
默认情况下,随着内容的增加,宽度也会增加,因此您需要将表格布局设置为固定。
table{
table-layout: fixed;
}
demo http://jsfiddle.net/ZmnQ6/6/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)