如何让表格中动态添加行内的文本实现自动换行？

嘿，我来帮你搞定这个表格文本换行的问题！你遇到的核心问题有两个：一是表格默认会被内容撑开宽度，二是\n在文本节点里不会被浏览器解析成换行。不用嵌套表格这么复杂，下面两个简单方法就能解决：

1. 用CSS固定表格布局+强制换行 #

这是最直接的方案，通过CSS限制表格宽度，让单元格文本自动换行，不会撑宽表格。你可以在multicast.css里添加以下样式：

#my-table {
  table-layout: fixed; /* 固定表格布局，按设定宽度渲染，不受内容影响 */
  width: 100%; /* 可以设为固定值比如800px，或者占满父容器 */
  border-collapse: collapse; /* 可选，让表格边框更整洁 */
}

#my-table td, #my-table th {
  word-wrap: break-word; /* 长单词自动拆分换行 */
  white-space: normal; /* 允许文本在容器边缘自动换行 */
  padding: 8px; /* 可选，增加单元格内边距，提升可读性 */
}

table-layout: fixed是关键，它会让表格的列宽按比例或设定值分配，不会被长文本撑开。配合word-wrap和white-space，文本就会自动换行并增加行高。

2. 处理\n的换行显示问题 #

你用document.createTextNode()插入带\n的文本时，浏览器只会把\n当成空格，不会解析成换行。如果想让\n生效，有两种方式：

方式A：替换\n为<br>标签（用innerHTML） #

修改你addRow函数里的文本插入代码：

// 原来的代码
// let newText = document.createTextNode('TEXT INFO AND VERY LONG TEXT INFO \n THAT SHOULD MAKE THE TABLE \n THE SAME THICKNESS BUT LONGER');
// newCell.appendChild(newText);

// 修改后的代码
let longText = 'TEXT INFO AND VERY LONG TEXT INFO \n THAT SHOULD MAKE THE TABLE \n THE SAME THICKNESS BUT LONGER';
newCell.innerHTML = longText.replace(/\n/g, '<br>'); // 把所有\n替换成HTML换行标签

方式B：用split拆分文本，手动添加换行元素 #

如果你不想用innerHTML（比如担心XSS风险），可以用str.split()拆分文本，然后逐个添加文本节点和<br>：

let longText = 'TEXT INFO AND VERY LONG TEXT INFO \n THAT SHOULD MAKE THE TABLE \n THE SAME THICKNESS BUT LONGER';
let textSegments = longText.split('\n');

textSegments.forEach((segment, index) => {
  newCell.appendChild(document.createTextNode(segment));
  // 最后一段后面不加换行
  if (index !== textSegments.length - 1) {
    newCell.appendChild(document.createElement('br'));
  }
});

结合起来使用 #

把CSS样式加上，再修改文本插入的代码，就能实现你想要的效果：表格宽度不变，长文本自动换行，行高随内容增加。完全不需要嵌套表格，简单又高效！

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