white-space: nowrap 在 table td 中常失效，因需同时满足三点：white-space: nowrap、overflow: hidden 和明确 width/max-width；且 table 必须设 table-layout: fixed，否则列宽由内容自适应，导致 nowrap 被绕过。
white-space: nowrap 在 table td 上为什么经常失效
直接给 td 加 white-space: nowrap 却依然换行，不是 CSS 写错了，而是移动端表格默认行为和布局上下文在“捣乱”。常见原因包括：
- 父
table没设width或max-width，浏览器自动收缩列宽，文字被挤到下一行（视觉上像换行，实则是列太窄） -
td是表格单元格，天生是display: table-cell，它不响应white-space的“强制单行”语义，除非配合overflow: hidden和明确宽度 - 移动端 Safari / Chrome 对
table-layout默认用auto，列宽由内容撑开，一旦内容含长英文/URL，就会触发内部断词（哪怕写了nowrap） - 混用了
word-break: break-all或overflow-wrap: break-word—— 它们会主动打断文本，覆盖nowrap效果
让 td 真正不换行的最小必要条件
只写 white-space: nowrap 不够。必须同时满足这三点，缺一不可：
-
white-space: nowrap：禁用文本内换行 -
overflow: hidden：裁掉溢出部分（visible或scroll都不行） -
width或max-width（像素值或百分比）：容器必须有可计算的宽度边界；用fit-content或auto在多数移动端浏览器中无效
示例：
td.no-wrap {
white-space: nowrap;
overflow: hidden;
width: 120px; /* 必须是具体值 */
}
移动端 table 布局必须加 table-layout: fixed
移动端默认 table-layout: auto 会让浏览器反复测量内容宽度，导致 white-space: nowrap 被绕过。加 table-layout: fixed 后，列宽由第一行 th/td 的 width 决定，后续所有行都严格按此渲染。
- 不加
table-layout: fixed，width在td上可能被忽略 - 加了之后，
td的width才真正生效，nowrap才能起作用 - 注意：加了
fixed后，th或td的width应设在第一行，否则可能不生效
推荐写法：
table.fixed-table {
table-layout: fixed;
width: 100%;
}
table.fixed-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
中文混英文/URL 场景下的额外处理
中文本身无空格，white-space: nowrap 通常稳；但遇到英文单词、邮箱、URL（如 https://example.com/path?x=1），浏览器仍可能在 /、.、? 处断行——这不是换行，是「字内断行」，white-space 控不住。
- 解决办法是加
word-break: keep-all：对中文禁止断字，对英文也禁止在任意字符间断开（即整个单词当一个“字”） - 避免用
word-break: break-all，它会让英文每个字母都可断，破坏可读性 - 若必须兼容极老 iOS Safari（overflow-wrap: anywhere 并设
min-width: 0防 flex 干扰，但普通表格不用
最终安全组合：
td.safe-no-wrap {
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
最常被忽略的一点：移动端表格的列宽控制权不在 td 自身，而在 table 和第一行的 th/td。写了一堆 nowrap 却没动 table-layout 或第一行列宽，等于没设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
