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

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

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

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

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

这可能会有帮助，

css

.wrap-me{ word-break: break-all !important; } <table> <thead> <tr> <td>Col 1</td> <td>Col 2</td> <td>Col 3</td> <td>Col 4</td> <td>Col 5</td> <td>Col 6</td> <td>Col 7</td> </tr> </thead> <tbody> <tr> <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td> <td class="wrap-me">test only</td> <td class="wrap-me">test with space long text</td> <td class="wrap-me">Col 4</td> <td class="wrap-me">Col 5</td> <td class="wrap-me">Col 6</td> <td class="wrap-me">Col 7</td> </tr> <tr> <td class="wrap-me">test only</td> <td class="wrap-me">test only</td> <td class="wrap-me">test with space long text</td> <td class="wrap-me">testwithoutspacetestonlylongtext</td> <td class="wrap-me">Col 5</td> <td class="wrap-me">Col 6</td> <td class="wrap-me">Col 7</td> </tr> </tbody> </table>

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

td {
   display: table-cell;
}

看起来你需要设置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。

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

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