包装在HTML表格中
我一直在使用word-wrap: break-word
来包装div
和span
的文本。 但是,它似乎不适用于表格单元格。 我有一个表设置为width:100%
,一行两列。 列中的文本虽然使用上述word-wrap
进行了样式word-wrap
,但不包装。 它会导致文本超出单元格的边界。 这发生在Firefox,Google Chrome和Internet Explorer上。
以下是源代码的样子:
td {
border: 1px solid;
}
<table style="width: 100%;">
<tr>
<td align="left">
<div style="word-wrap: break-word;">Long Content</div>
</td>
<td align="right"><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>
以下在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>
<td style="word-break:break-all;">longtextwithoutspace</td>
要么
<span style="word-break:break-all;">longtextwithoutspace</span>
一个长镜头,但仔细检查与Firebug(或类似),你不是不小心继承了以下规则:
white-space:nowrap;
这可能会覆盖您指定的换行符。
链接地址: http://www.djcxy.com/p/15469.html