white-space: nowrap在表格中失效，因浏览器默认table-layout: auto使列宽由内容撑开，nowrap无溢出基准；须同时满足：table设table-layout: fixed、td设明确宽度、td设display: block/inline-block。
white-space: nowrap 单独写在 里为什么没用
它不是“开关”，而是依赖边界判断的约束规则。浏览器默认用 table-layout: auto，列宽由内容撑开，white-space: nowrap 根本找不到“哪里算溢出”，自然不生效。你看到的“换行”，其实是浏览器在没明确宽度时做的妥协渲染，不是 bug，是行为预期。
让 white-space: nowrap 在表格中真正起效的三要素
必须同时满足以下条件，缺一不可：
-
table 元素上设 table-layout: fixed——强制列宽按定义分配，而非内容驱动
-
td 或其父级 <col> 有明确宽度（如 width: 160px 或 width: 25%）——提供 nowrap 判断溢出的基准
-
td 设 display: block 或 display: inline-block——让单元格具备块级上下文，white-space 才能完整作用
中英文混排、URL、邮箱等长串要额外加什么
纯 white-space: nowrap 对中文有效，但对英文单词、路径、邮箱，浏览器仍可能在 /、.、? 处“断词”——这不是换行，是断词行为。需补充：
-
word-break: keep-all：阻止英文单词被拆开
- 若允许截断，还需组合
overflow: hidden + text-overflow: ellipsis，且三者缺一不可
- 避免在
td 内嵌套 <p>、<div> 等自带换行语义的元素，它们会覆盖 nowrap
contenteditable 的 怎么彻底禁换行
CSS 完全失效：用户按 Enter 会插入 <div> 或 <p>，DOM 已变成多行结构。必须用 JS 干预：
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown，对 e.key === 'Enter' 调用 e.preventDefault()
- 监听
paste，用 e.clipboardData.getData('text/plain') 提取纯文本，并 .replace(/[\r\n]/g, '') 清除换行符
- Safari 下建议加
-webkit-appearance: none，否则光标定位可能异常
真正容易被忽略的是：nowrap 生效的前提是 DOM 结构干净。一旦 td 里混入了带换行语义的子元素，或者父容器用了 flex 布局却没设 min-width: 0，整个链路就断了——这时候调样式不如先查结构。
它不是“开关”，而是依赖边界判断的约束规则。浏览器默认用 table-layout: auto，列宽由内容撑开，white-space: nowrap 根本找不到“哪里算溢出”，自然不生效。你看到的“换行”，其实是浏览器在没明确宽度时做的妥协渲染，不是 bug，是行为预期。
让 white-space: nowrap 在表格中真正起效的三要素
必须同时满足以下条件，缺一不可：
-
table元素上设table-layout: fixed——强制列宽按定义分配，而非内容驱动 -
td或其父级<col>有明确宽度（如width: 160px或width: 25%）——提供 nowrap 判断溢出的基准 -
td设display: block或display: inline-block——让单元格具备块级上下文，white-space 才能完整作用
中英文混排、URL、邮箱等长串要额外加什么
纯 white-space: nowrap 对中文有效，但对英文单词、路径、邮箱，浏览器仍可能在 /、.、? 处“断词”——这不是换行，是断词行为。需补充：
-
word-break: keep-all：阻止英文单词被拆开 - 若允许截断，还需组合
overflow: hidden+text-overflow: ellipsis，且三者缺一不可 - 避免在
td内嵌套<p>、<div>等自带换行语义的元素，它们会覆盖 nowrap
contenteditable 的 怎么彻底禁换行
CSS 完全失效：用户按 Enter 会插入 <div> 或 <p>，DOM 已变成多行结构。必须用 JS 干预：
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown，对 e.key === 'Enter' 调用 e.preventDefault()
- 监听
paste，用 e.clipboardData.getData('text/plain') 提取纯文本，并 .replace(/[\r\n]/g, '') 清除换行符
- Safari 下建议加
-webkit-appearance: none，否则光标定位可能异常
真正容易被忽略的是：nowrap 生效的前提是 DOM 结构干净。一旦 td 里混入了带换行语义的子元素，或者父容器用了 flex 布局却没设 min-width: 0，整个链路就断了——这时候调样式不如先查结构。
CSS 完全失效：用户按 Enter 会插入 <div> 或 <p>，DOM 已变成多行结构。必须用 JS 干预：
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown，对e.key === 'Enter'调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清除换行符 - Safari 下建议加
-webkit-appearance: none，否则光标定位可能异常
真正容易被忽略的是：nowrap 生效的前提是 DOM 结构干净。一旦 td 里混入了带换行语义的子元素，或者父容器用了 flex 布局却没设 min-width: 0，整个链路就断了——这时候调样式不如先查结构。
