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中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。

当前回答

看起来你需要设置word-wrap:break-word;在块元素(div)上，具有指定的(非相对的)宽度。例:

<表格样式=“宽度：100%;”><tr> <td><div style=“display：block; word-wrap： break-word; width：40em;”>looooo</div></td> <td><span style=“display：inline;”>Foo</span></td> </tr></table>

或者根据Abhishek Simon的建议使用word-break:break-all。

2011-08-24 05:51:27

其他回答

默认情况下，表格自动换行，所以确保显示的表格单元格为table-cell:

td {
   display: table-cell;
}

2009-08-11 04:10:28

虽然可能性不大，但请使用Firebug(或类似工具)仔细检查，确保您没有意外继承以下规则:

white-space:nowrap;

这可能会覆盖您指定的换行行为。

2009-08-11 05:00:29

只要增加宽度。这对我很管用。

     <td style="width:10%;"><strong>Item Name</strong></td>

2020-08-18 09:06:21

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

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

2015-12-11 13:43:53

我也遇到过类似的问题。我在一个AngularJS应用程序的Bootstrap模式中有一个表。当我更改表上的过滤器，并且在相关单元格中出现长值时，文本将溢出到单元格之外和模态之外。这个CSS最终解决了这个问题，应用到TD上:

style="white-space:pre-wrap; word-break:break-word"

这使得值即使在更改表内容时也能正确地换行。

2022-01-21 13:40:23

HTML表中的换行

推荐文章

最新文章

标签