white-space: nowrap单独使用常失效，因需同时满足三个条件：父容器设width/max-width、目标元素设display:inline-block/block、避免CSS优先级覆盖；实现省略号还需overflow:hidden和text-overflow:ellipsis。
white-space: nowrap 为什么加了还不生效
单独写 white-space: nowrap 几乎总失效，不是语法错，而是它根本没机会起作用。浏览器需要明确知道“一行能有多宽”，否则连“换不换行”都无从判断。
常见卡点：
-
width或max-width没设——父容器宽度由内容撑开，nowrap 失去约束对象 - 目标元素是
<span>、<a>这类默认display: inline的元素——nowrap 对纯内联元素控制力极弱 - CSS 优先级被覆盖：比如外层写了
#header p { white-space: normal !important; }，你的nowrap就直接被无视 - 开发者工具里看到 computed styles 是
pre-wrap或normal——说明你写的那行没生效，得查层叠顺序
实现单行截断（带省略号）的硬性三条件
text-overflow: ellipsis 不是“写了就出省略号”，它必须同时满足三个并列条件，缺一不可：
- 必须有
white-space: nowrap - 必须有
overflow: hidden（clip也行，但兼容性差） - 容器必须有**确定宽度**：用
width、max-width、flex-basis，或在table-layout: fixed表格中给<td>设像素/百分比宽
例如：div { white-space: nowrap; text-overflow: ellipsis; } —— 没 overflow 和 width，等于没写。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
表格单元格（<td>）里强制不换行的组合写法
表格有自己的布局逻辑，white-space: nowrap 在 <td> 里容易被忽略，必须组合干预：
- 给
<table>加table-layout: fixed，否则列宽由内容决定，nowrap 失去作用对象 - 给
<td>或<th>显式设width（如width: 120px或width: 20%） - 避免在
<td>内嵌套<div>、<p>等块级元素——它们自带换行语义，会干扰 nowrap - 中英文混排长串（如 URL）时，额外加
word-break: keep-all，防止浏览器在/、.、@处自动断词
<textarea> 强制不换行只能靠 readonly + CSS
wrap="off" 不存在，white-space: nowrap 在 <textarea> 上被浏览器明确忽略——这是 CSS 规范限定的，不是 bug。
真正有效的解法是切换交互模式：
- 加
readonly属性（或disabled），让<textarea>退化为展示容器 - 配
white-space: pre（不是pre-wrap）——严格保留空格与换行符，且不触发自动折行 - 加
overflow-x: auto启用水平滚动，resize: horizontal提升体验 - 必须移除
word-wrap和word-break的默认值，显式设为normal
如果要保持可编辑，这条路走不通；得换成 <pre><code contenteditable> 或专用编辑器。
最常被忽略的点是：所有样式方案都建立在 DOM 结构干净的前提下。一旦用户在 contenteditable 或 <td> 里按了 Enter，插入的是 <div> 或 <p>，换行已进入 DOM，CSS 再怎么写都救不回来——这时候只能 JS 拦截 keydown 和 paste 事件做前置清洗。
