如何在自动布局表格中实现文本达到指定宽度后换行？

可以通过结合CSS的fit-content宽度、max-width（使用ch单位匹配字符数）以及换行属性来实现需求，具体样式如下：

td {
  white-space: normal; /* 若需要保留原始空格，可替换为pre-wrap */
  overflow-wrap: break-word;
  width: fit-content;
  max-width: 30ch; /* 30ch对应约30个字符的宽度，可按需调整 */
}

原理说明 #

1. width: fit-content：让单元格宽度自适应内容长度，短文本的列不会预留多余空间，完全贴合内容宽度。
2. max-width: 30ch：限制单元格的最大宽度为30个字符的宽度（ch单位基于当前字体的字符宽度计算，适配不同字体），当内容超过这个宽度时触发换行。
3. overflow-wrap: break-word：确保长单词或连续无空格字符串也能在max-width限制内换行，避免溢出。
4. white-space: normal：保证文本在需要时自动换行，若你的内容需要保留原始空格（比如代码片段），可以换成pre-wrap，同样支持换行。

注意事项 #

• 若表格列数极多，浏览器仍可能为了容纳所有列而压缩部分单元格宽度，此时可以给表格容器添加overflow-x: auto，让表格在横向超出容器时出现滚动条，避免单元格过度压缩。
• ch单位在部分非等宽字体下可能略有偏差，若需要更精确的字符宽度控制，可以根据字体实际字符宽度换算成px值替代30ch。

内容的提问来源于stack exchange，提问作者Yevgeniy P