用 CSS 设置 max-width 和 word-break: break-word（或 overflow-wrap: break-word）可实现自动换行且不撑开单元格；需配合 table-layout: fixed 和 col 宽度控制整体布局，移动端还需 viewport 声明与 min-width 保护。
表格里文字挤成一团，怎么让它自动换行又不撑开单元格？
默认情况下 <td> 里的长段文字（比如一串无空格的英文、URL 或中文连续输入）会强行撑宽表格，破坏布局。根本原因是浏览器默认对 <td> 应用 white-space: normal，但遇到无断点内容时无法换行。
解决方法不是加 <br> —— 那等于手动拆行，维护成本高且响应式失效。真正可控的做法是用 CSS 控制换行行为：
- 对需要紧凑排版的
<td>或其父级<table>加类，例如class="compact-cell" - 在样式中设置：
.compact-cell { word-break: break-word; /* 中文/英文混排优先用这个 */ /* 或者用以下之一，视内容类型而定： */ /* overflow-wrap: break-word; /* 同上，现代写法 */ /* word-break: break-all; /* 强制断任意字符，慎用，可能切开单词 */ } - 必须配合
max-width（比如max-width: 200px），否则break-word不生效 —— 没宽度限制，浏览器认为“没必要换行”
中文段落太长，为什么加了 word-break 还是不换行？
常见错因是漏掉了容器宽度约束或用了错误的属性组合。中文本身没有空格分隔，但浏览器默认允许在字间换行，前提是容器有明确宽度边界。
典型错误写法：
<td style="word-break: break-word;">这是一段非常非常非常长的中文内容</td>——没设
width 或 max-width，浏览器按内容自然宽度渲染，换行逻辑压根不触发。
立即学习“前端免费学习笔记（深入）”；
正确做法（内联示例，实际推荐外链 CSS）：
<td style="max-width: 180px; word-break: break-word;">这是一段非常非常非常长的中文内容</td>
注意：word-break: break-word 在旧版 IE 中需写作 word-wrap: break-word，如果还要兼容 IE9–，建议同时写：
word-wrap: break-word; word-break: break-word;
表格列宽被内容撑爆，table-layout: fixed 真的有用吗？
有用，而且往往是解决表格整体失控的关键一步。默认 table-layout: auto 会让浏览器反复测量内容宽度来决定列宽，一旦某列出现超长无空格字符串，整列甚至整表就被带偏。
启用固定布局后，列宽由 <col> 或第一行 <th>/<td> 的 width 决定，后续内容强制适应：
- 给
<table>加样式：table-layout: fixed; - 为每列指定宽度，推荐用
<col>标签（语义清晰、不影响内容结构）：<table style="table-layout: fixed; width: 100%;"> <col style="width: 120px"> <col style="width: 200px"> <tr><td>短文本</td><td>超长超长超长超长超长超长</td></tr> </table>
- 此时再配合
word-break: break-word和max-width，就能稳住每一列的实际显示效果
移动端表格文字重叠、缩放失常，该怎么收口？
问题本质是 viewport 缩放和表格默认行为冲突。即使桌面端调好了，手机上可能因横向滚动或字体放大导致文字溢出或重叠。
关键控制点只有两个：
- 确保页面有正确的 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1">
- 对表格加最小宽度保护（防过度压缩）：
table { min-width: 320px; /* 避免在小屏上被压扁到字重叠 */ width: 100%; } - 如果内容实在太多，别硬塞进表格 —— 考虑用
@media切换为卡片式布局，或者加横向滚动容器：<div style="overflow-x: auto;"> <table>...</table> </div>
，并确保table不设width: 100%，否则滚动失效
表格紧凑排版真正的难点不在 CSS 属性本身，而在于宽度控制链：viewport → 容器宽度 → table 宽度 → col 宽度 → td 最大宽度 → 换行策略。漏掉任意一环，都可能让前面所有设置失效。
