HTML表中的换行

我一直在使用word-wrap: break-word在div和span中对文本进行换行。然而，它似乎在表格单元格中不起作用。我有一个设置为width:100%的表，有一行和两列。列中的文本虽然使用了上面的换行样式，但不能自动换行。它会导致文本超出单元格的边界。这发生在Firefox，谷歌Chrome和Internet Explorer上。

下面是源代码的样子:

td { 边框:1px实体; L} <table style="width: 100%;"> < tr > < td > < span style=" font - family:宋体;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong词 < / div > 道明> < / <span style=" font - family:宋体;">短字< / span > < / td > < / tr > 表> < /

上面的长单词比我的页面的边界大，但它没有与上面的HTML中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。

当前回答

我已经尽力了，但对我来说就是这样

white-space: pre-wrap;
word-wrap: break-word;

2020-09-06 10:34:18

其他回答

如果你不需要表格边框，应用这个:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

2015-12-11 13:43:53

获得奖励的答案是正确的，但如果表的第一行有一个合并/连接的单元格(所有单元格的宽度相同)，它就不起作用。

在这种情况下，你应该使用colgroup和col标签来正确显示它:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

2013-01-11 07:15:01

更改代码

word-wrap: break-word;

word-break:break-all;

例子

<table style="width: 100%;"> < tr > < td > < div风格= "单词分割:打破所有;长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容</div> 道明> < / <span style=" font - family:宋体;"< / >短内容跨度> 道明> < / < / tr > 表> < /

2016-04-12 02:39:32

如前所述，将文本放在div中几乎是可行的。你只需要指定div的宽度，这对于静态布局来说是幸运的。

这适用于FF 3.6, IE 8, Chrome。

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

2011-04-10 05:14:36

下面是我在ie浏览器中使用的。注意添加了table-layout:fixed CSS属性

td { 边框:1px实体; ｝ <table style=" font - family:宋体;宽度:100%”> < tr > < span style=" font - family:宋体 LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord 道明> < / < / tr > 表> < /

2009-12-10 20:15:33

HTML表中的换行

推荐文章

最新文章

标签