table-layout: fixed遇文本溢出单元格时失效的技术问题咨询

问题根源是连续无空格的长文本不会自动换行，仅靠overflow:hidden无法阻止它撑宽列。只需给<td>添加额外CSS属性即可解决：

方案1：截断文本并显示省略号（推荐） #

修改后的CSS代码：

table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  overflow: hidden;
  /* 新增以下两行 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

方案2：强制长文本换行 #

如果希望文本自动拆分换行而非隐藏，可使用：

table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  overflow: hidden;
  /* 新增换行属性 */
  word-break: break-all;
}

原理说明 #

• white-space: nowrap：禁止文本自动换行，确保overflow:hidden能截断超出部分
• text-overflow: ellipsis：在截断位置显示省略号（可选，提升视觉体验）
• word-break: break-all：强制拆分连续的长单词/字符，让文本在列宽范围内换行

完整示例代码 #

CSS #

table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML #

<table>
  <col style="width: 50px">
  <col style="width: 40px">
  <col style="width: 30px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>supersuperlooooongcontent</td>
  </tr>
</table>

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