white-space: nowrap 单独使用几乎总失效，因它仅控制文本换行行为，不改变盒模型；必须配合 width/max-width、display: block/inline-block、overflow: hidden 等约束才能生效。

white-space: nowrap 能禁止自动换行，但单独写这行 CSS 几乎总是失效——它不是开关，而是依赖配套约束的“半生效”规则。

为什么只写 white-space: nowrap 没效果

常见失效场景和对应原因：

• 父容器没设 width 或 max-width，浏览器根本不知道“多宽算超”，nowrap 就无从判断是否该压成一行
• 元素是 <span> 这类默认 display: inline 的元素，nowrap 对内联元素的宽度控制极弱；必须加 display: block 或 display: inline-block
• CSS 优先级被覆盖：比如外层用了 !important，或更具体的选择器（如 .container p）设置了 white-space: normal
• 用了 pre-wrap、pre-line 等值在同一样式块里，后写的会覆盖前写的

text-overflow: ellipsis 不出现的三个硬性条件

想让溢出时显示省略号，缺一不可：

• 必须声明 white-space: nowrap
• 必须声明 overflow: hidden（clip 也行，但兼容性差）
• 容器必须有明确宽度：用 width、max-width，或 flex 布局中通过 flex-basis 固定尺寸

错误示例：div { white-space: nowrap; text-overflow: ellipsis; } —— 没 overflow 和 width，纯属无效配置。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

表格单元格（<td>）里 nowrap 失效怎么办

表格默认按内容撑宽，white-space: nowrap 很容易被忽略：

• 给 <table> 加 table-layout: fixed，否则列宽由内容决定，nowrap 失去作用对象
• 给 <td> 或 <th> 显式设 width（像素或百分比），不能靠 auto
• 避免在 <td> 内嵌套 <div> 等块级元素，它们可能触发内部换行逻辑
• 中英文混排长串建议补上 word-break: keep-all，防止英文单词被意外拆开

contenteditable 元素禁换行不能只靠 CSS

用户按 Enter 会插入 <div> 或 <p>，DOM 结构已变，white-space 彻底失能：

• 监听 keydown，对 e.key === 'Enter' 调用 e.preventDefault()
• 监听 paste，用 e.clipboardData.getData('text/plain') 提取纯文本，并 .replace(/[\r\n]/g, '') 清除换行符
• Safari 下还需加 -webkit-appearance: none，否则默认样式干扰光标渲染

真正难的不是不让它换行，而是不让换行行为进入 DOM；一旦节点结构变复杂，white-space 就彻底失能。