我试图包装一个长词。我看过这篇文章:如何防止长词破坏我的 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/