white-space: nowrap 是最直接有效的禁止自动换行方式，但需配合 width/max-width、display:block/inline-block、overflow:hidden 及 text-overflow:ellipsis 才能实现完整截断效果，且在表格、contenteditable 等场景需额外处理。

white-space: nowrap 是最直接有效的禁止自动换行方式，但它不是万能开关——漏掉配套样式或误用场景，反而会让文字溢出、截断失效、甚至光标消失。

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

单独设置 white-space: nowrap 后文字仍换行，常见原因有：

• 父容器没设 width 或 max-width，浏览器无法判断“哪里算超出”
• 元素是 span 这类内联元素，默认不占满行，nowrap 作用被忽略（需加 display: block 或 inline-block）
• 用了 white-space: pre-wrap 或 normal 等其他值，覆盖了 nowrap
• CSS 优先级被更高权重的规则覆盖（比如外层 !important 或更具体的选择器）

text-overflow: ellipsis 不生效的硬性条件

这个省略号只在严格满足三要素时才显示：

• 必须同时声明 white-space: nowrap
• 必须设置 overflow: hidden（clip 也行，但 hidden 更通用）
• 容器必须有明确宽度：用 width、max-width 或弹性布局中的 flex-basis 等固定尺寸约束

缺任意一个，... 就不会出现。例如：div { white-space: nowrap; text-overflow: ellipsis; } —— 没 overflow 和 width，纯属无效配置。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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

表格单元格里文字不换行的特殊处理

表格默认会压缩内容，white-space: nowrap 容易被忽略，必须配合布局控制：

• 给 table 加 table-layout: fixed，否则列宽由内容撑开，nowrap 失效
• 给 td 或 th 设 width（百分比或像素），否则宽度不可控
• 避免在 td 内嵌套块级元素（如 div），它们可能触发内部换行逻辑
• 中英文混排长串时，加 word-break: keep-all 防止英文单词被意外拆开

contenteditable 元素禁换行不能只靠 CSS

即使写了 white-space: nowrap，用户按 Enter 还是会插入 <div> 或 <p>，导致 DOM 多行。必须 JS 干预：

• 监听 keydown，对 e.key === 'Enter' 调用 e.preventDefault()
• 监听 paste，用 e.clipboardData.getData('text/plain') 提取纯文本，并 .replace(/[\r\n]/g, '') 清除换行符
• 禁用 input 事件做后置清洗——DOM 已污染，光标容易跳到开头
• Safari 下还需加 -webkit-appearance: none，否则默认样式干扰光标渲染

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