css表格单元格中的长文本如何实现自动换行

当单元格中的文本长度超过单元格宽度时，可以使用word-wrap属性来实现长文本换行的效果。以下是具体的攻略：

当单元格中的文本长度超过单元格宽度时，可以使用word-wrap属性来实现长文本换行的效果。以下是具体的攻略：

1. 使用 word-wrap: break-word 实现自动换行

word-wrap 属性用于指定长单词或 URL 地址的换行方式。默认情况下，当单元格中的文本长度超过单元格宽度时，单词会被强制移至下一行，导致单元格变为高度单调的一列。可以将 word-wrap 属性设置为 break-word，当单元格中的有一个单词过长，它将会被断开并移到下一行开始。代码示例如下：

table td {
  word-wrap: break-word;
}

2. 使用white-space: pre-wrap配合word-wrap: break-word实现自动换行

word-wrap：break-word 属性可以当单元格内容中包含一个过长的单词或 URL 链接时解决问题，但在文本中包含多个连续的空格时仍有问题，这样在到达行的末尾的时候会再次被强制断开。这时，再将 white-space 属性设置为 pre-wrap，就能够实现对多个连续的空格进行自动换行了。代码示例如下：

table td {
  word-wrap: break-word;
  white-space: pre-wrap;
}

以上是两个示例，分别使用 word-wrap 和 white-space 属性从不同的角度实现了文本自动换行的效果。除此之外，还可以使用 max-width 属性设置单元格宽度的最大值以及 overflow 属性来控制单元格中文本的显示方式等等。在实现自动换行的过程中，建议先对样式进行优化，避免在不同的浏览器或设备上产生不同的结果。