html - HTML表中的自动换行(Word-wrap in an HTML table)

Question

I've been using word-wrap: break-word to wrap text in div s and span s.

(我一直在使用word-wrap: break-word将文本div和span 。)

However, it doesn't seem to work in table cells.

(但是，它似乎在表单元格中不起作用。)

I have a table set to width:100% , with one row and two columns.

(我有一个表设置为width:100% ，有一行和两列。)

Text in columns, although styled with the above word-wrap , doesn't wrap.

(列中的文本尽管使用上述word-wrap样式设置，但不会自动换行。)

It causes the text to go past the bounds of the cell.

(它导致文本超出单元格的边界。)

This happens on Firefox, Google Chrome and Internet Explorer.

(这发生在Firefox，Google Chrome和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.

(上面的长字比我页面的边界大，但与上面的HTML相同。)

I've tried the suggestions below of adding text-wrap:suppress and text-wrap:normal , but neither helped.

(我尝试了以下添加text-wrap:suppress和text-wrap:normal ，但是都没有帮助。)

  ask by psychotik translate from so

Answer 1

The following works for me in Internet Explorer.

(以下内容适用于Internet Explorer。)

Note the addition of the table-layout:fixed CSS attribute

(请注意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>