表格单元格自动换行失效，求适配全设备的CSS解决方案

阿华AIGC实验室

2026-5-21

解决表格单元格长文本无空格时的强制换行问题

这个坑我之前踩过！你遇到的问题核心在于表格默认的布局逻辑和 word-wrap: break-word 的局限性——后者只对有空格分隔的文本生效，遇到无空格的连续长内容（比如长文件名、纯字母数字串）就失效了，再加上表格默认会根据内容自动调整宽度，自然就撑破外层容器了。

给你一套适配全尺寸设备的CSS方案，直接套用就能解决：

关键CSS属性组合

给表格设置 table-layout: fixed：这是核心！它会让表格优先遵循你设置的列宽比例分配空间，而不是被内容撑开，彻底解决表格宽度不受控的问题。
给**单元格（td/th）**设置 word-break: break-all：强制文本在任意字符处换行，不管有没有空格，完美适配无空格的长内容。
保留你原来的 width: 50% 来实现响应式列宽，不用固定像素，自动适配不同屏幕尺寸。

完整代码示例

/* 外层容器：确保表格不会超出范围，小屏时可横向滚动提升体验 */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* 表格：固定布局+100%宽度，适配容器 */
.custom-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* 单元格：按比例分配宽度+强制换行 */
.custom-table td, .custom-table th {
  width: 50%;
  word-break: break-all;
  padding: 10px;
  border: 1px solid #eee;
}