我一直在使用 word-wrap:break-word
在 div
和 span
中换行。但是,它似乎不适用于表格单元格。我有一个设置为 width:100%
的表格,有一行和两列。列中的文本虽然采用上述 word-wrap
的样式,但不会换行。它会导致文本超出单元格的边界。这发生在 Firefox、Google Chrome 和 Internet Explorer 上。
源代码如下:
td {
border: 1px solid;
}
<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
上面的长字大于我的页面的边界,但它不会与上面的 HTML 中断。我尝试了以下添加 text-wrap:suppress
和 text-wrap:normal
的建议,但都没有帮助。
最佳答案
以下内容适用于 Internet Explorer。注意添加 table-layout:fixed
CSS 属性
td {
border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
关于html - HTML 表格中的自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1258416/