HTML 表格中的自动换行 [英] Word-wrap in an HTML table
问题描述
我一直在使用 word-wrap: break-word 将文本包裹在 div 和 span 中.但是，它似乎不适用于表格单元格.我有一个设置为 width:100% 的表格，有一行和两列.列中的文本虽然使用上述 word-wrap 设计，但不会自动换行.它会导致文本越过单元格的边界.这种情况发生在 Firefox、Google Chrome 和 Internet Explorer 上.
以下是源代码:
td {边框:1px 实心；}<tr><td><div style="word-wrap: break-word;">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</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 {边框:1px 实心；}
<tr><td style="word-wrap: break-word">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</td></tr></table>I've been using word-wrap: break-word to wrap text in divs and spans. However, it doesn't seem to work in table cells. I have a table set to width:100%, with one row and two columns. Text in columns, although styled with the above word-wrap, doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.
Here's what the source looks like:
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>
The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.
解决方案 The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute
td {
border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
这篇关于HTML 表格中的自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆