表格单元格被空格撑高，根本不是空格“太多”，而是 white-space 渲染模式和行高计算共同作用的结果——本身不占高度，但换行、缩进、预格式化等行为会让浏览器多画一行。
表格单元格被空格撑高，根本不是空格“太多”，而是 white-space 渲染模式和行高计算共同作用的结果—— 本身不占高度，但换行、缩进、预格式化等行为会让浏览器多画一行。
为什么 会让 td 变高？
单个 不会撑高单元格；真正触发高度增加的，是它出现在特定 white-space 模式下（如 pre、pre-wrap）或与换行符、
<br>、
<wbr></wbr> 混用时。浏览器会为每个“视觉换行”分配一行高度，而 line-height 决定了这行有多高。
-
white-space: normal下只是个普通空格，不影响行数 - 一旦用了
white-space: pre，所有空格、换行符都保留，\n就可能渲染出两行甚至三行 -
<br>
或\n配合white-space: pre-line也会新增行框，每行都按line-height计算高度 - 如果父
td没设vertical-align，默认baseline会让内容“悬垂”，看起来更高
white-space 设错是最常见的源头
很多开发者为了保留空格或换行，直接给 td 加 white-space: pre，结果发现单元格莫名变高、对齐错乱。这不是 bug，是 pre 的语义：它把所有空白字符（包括换行、制表符、多个空格）都当有效排版指令处理。
- 想保留换行符（如后端返回的
"A\nB"）？用white-space: pre-line—— 它合并多余空格，只让\n生效 - 想精确控制空格数量（如字段对齐）？用
white-space: normal，别碰pre - 绝对不要在表格中用
white-space: pre-wrap，它既保留换行又保留空格，极易导致意外多行和高度抖动 - 检查 CSS 重置库或 UI 框架（如 Bootstrap）是否偷偷加了
white-space: nowrap或pre，它们会覆盖你的意图
怎么安全地“撑高”或“压低”单元格？
真要控制高度，别依赖空格或换行符——它们不可控、不一致、响应式下易崩。直接用 CSS 控制盒模型更可靠。
- 固定行高：
td { line-height: 1.4; }，比设height更自然，兼容文字大小变化 - 最小高度兜底：
td { min-height: 40px; }，避免空数据时塌陷，且不影响内容增长 - 压住高度不膨胀：
td > div { max-height: 80px; overflow: hidden; }，把内容包进div再控制，避开table-cell的 overflow 限制 - 垂直居中对齐：
td { vertical-align: middle; }，消除 baseline 悬垂造成的“虚高”
动态插入空格时 JS 容易踩的坑
后端返回空值，前端用 JS 填 占位，一不小心就撑高——问题常出在插入方式和上下文。
- 用
cell.textContent = value || '\u00A0'最安全，\u00A0是 Unicode - 避免
cell.innerHTML = value || ' '，如果value含特殊字符（如&、），可能引发 XSS 或解析错误 - 千万别写
cell.innerHTML = ' '来“手动加高”，三个pre模式下就是三个字符宽度，在normal下还是一个空格，纯属误导 - 若需模拟缩进（如树形表格），用
padding-left或margin-left，而不是塞
真正需要“撑高”的场景极少，多数时候是误以为高度来自空格，其实根源在 line-height、vertical-align 或包裹元素的 display 类型。盯着空格调样式，不如打开开发者工具看 computed styles 里实际生效的 line-height 和 height 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
