white-space: nowrap加了仍换行，是因为该属性仅控制文本内部空格和换行符处理，不约束布局；失效主因是缺失width/max-width、目标元素为inline需配display:inline-block、被高优先级样式覆盖，或表格中未设table-layout: fixed及td明确宽度。

white-space: nowrap 为什么加了还是换行

不是属性写错了，而是浏览器根本没机会应用它——white-space: nowrap 只控制文本内部如何处理空格和换行符，不负责布局约束。常见失效原因：

• 父容器没设 width 或 max-width，浏览器不知道“一行该多宽”，自然无法判断是否溢出
• 目标元素是 <span></span> 这类默认 display: inline 的元素，nowrap 对内联元素的换行控制力极弱，必须搭配 display: inline-block 或 block
• 被更高优先级样式覆盖，比如外层写了 !important，或更具体的选择器（如 #header p）重置了 white-space
• 实际生效的是 white-space: pre-wrap 或 normal —— 检查 computed styles，别只信自己写的那行

text-overflow: ellipsis 不显示省略号的硬性条件

这个省略号不是“写了就出”，它有且仅有三个并列前提，缺一不可：

• 必须有 white-space: nowrap
• 必须有 overflow: hidden（clip 也行，但兼容性不如 hidden）
• 容器必须有确定宽度：用 width、max-width、flex-basis，或在 table-layout: fixed 表格中给 <td> 设像素/百分比宽度 <p>例如：<code>div { white-space: nowrap; text-overflow: ellipsis; } —— 没 overflow 和 width，等于没写。
  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  表格单元格（<td>）里 <code>white-space: nowrap 失效怎么办

  表格有自己的一套布局逻辑，white-space: nowrap 在 <td> 里容易被忽略，必须组合干预： <ul><li>给 <code><table> 加 <code>table-layout: fixed，否则列宽由内容撑开，nowrap 失去作用对象

  给 <td> 或 <code><th> 显式设 <code>width（如 width: 120px 或 width: 20%），否则宽度不可控

  避免在 <td> 内嵌套 <code><div>、<code><p></p> 等块级元素，它们自带换行语义，会干扰 nowrap 生效

  中英文混排长串时，额外加 word-break: keep-all，防止英文单词被浏览器主动拆开

  contenteditable 元素禁换行不能只靠 CSS

  即使加了 white-space: nowrap，用户按 Enter 仍会插入 <div> 或 <code><p></p>，DOM 已变成多行结构，CSS 彻底失能：

  • 监听 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 就彻底失能。