Table表格中内容太多，不会自动换行导致样式混乱解决办法

最新推荐文章于 2024-03-25 18:56:01 发布

前端.攻城狮

最新推荐文章于 2024-03-25 18:56:01 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript CSS3

本文链接：https://blog.csdn.net/weixin_45304198/article/details/115719687

版权

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

CSS3

2 篇文章

订阅专栏

当表格中的td内容过长且无断裂点时，会导致样式混乱。通过CSS的word-break和word-wrap属性可以解决这一问题。设置`word-break: break-all;`强制英文单词换行，`word-wrap: break-word;`确保内容在边界内换行。此外，应用`max-width`限制单元格的最大宽度，以实现更好的自适应效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题:
在开发使用自适应表格时，如果某一个td的内容太多的话，并且内容没有‘-’/单词边界等，导致内容不会自动换行，直接一行显示导致样式混乱难看

解决方法

td {
  word-break: break-all;    // 设置强行换行 break-all强制英文单词断行
  word-wrap: break-word;    // 内容将在边界内换行
}

// 内联样式
<td style="max-width: 600px; word-break: break-all; word-wrap:break-word;">{{ data }}</td>

// 对于自适应的表格可以给它加个宽度
td {
  max-width: 600px;
  word-break: break-all;    // 设置强行换行 break-all强制英文单词断行
  word-wrap: break-word;    // 内容将在边界内换行
}