我想把一个长词换行。我看过这篇文章: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/
最佳答案
table 默认采用 table-layout: auto;
,因此随着内容的增加,宽度也会增加,因此您需要将 table-layout 设置为 fixed。
table{
table-layout: fixed;
}
关于css - 嵌套表格中的长字换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19537209/