white-space: nowrap 单独作用于 <p> 无效，因其仅约束文本内空白符换行行为，不改变块级元素流式布局；需配合 display: inline-block、固定宽度及 overflow: hidden 才生效。
white-space: nowrap 单独加在 <p> 上基本无效——它不是“开关”，而是一个依赖上下文才能起效的排版约束。
为什么 p 加了 white-space: nowrap 还是换行？
根本原因不是属性写错，而是浏览器没“执行条件”：
-
<p>默认是display: block，但white-space: nowrap只控制内部文本是否因空白符或容器边界换行，不改变块级元素自身的流式布局行为 - 父容器没设
width或max-width，浏览器无法判断“一行到底多宽”，自然不会触发截断逻辑 - 若父容器是
flex或grid，且未设flex-shrink: 0或min-width: 0，<p>会被压缩导致强制折行（哪怕写了nowrap） - 中文场景下，即使没有空格，浏览器仍可能在标点（如顿号、句号）或中英文混排处折行——这不是
white-space管的，而是line-break和word-break的职责
p 元素用 style 写 white-space 的实操要点
直接内联写 style="white-space: nowrap" 没问题，但必须同步补全其他必要样式：
- 给
<p>自身加display: inline-block或display: inline（否则nowrap对块级元素效果极弱） - 必须配合
overflow: hidden（否则内容溢出不可见，也影响text-overflow: ellipsis生效） - 必须指定宽度：用
style="width: 200px"或max-width，不能靠父容器“撑开” - 若要显示省略号，三者缺一不可：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis
示例：<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 150px; display: inline-block;">这是一段超长文本</p>
立即学习“前端免费学习笔记（深入）”；
不同 white-space 值对 <p> 的实际影响差异
别只记名字，要看它对真实文本的处理逻辑：
-
normal：合并连续空格、忽略换行符、自动换行（默认行为） -
nowrap：合并空格、忽略换行符、**禁止自动换行**（但长单词、URL 仍可能在/.处折行） -
pre：保留所有空格和换行符、等宽字体、不自动换行（类似<pre>标签） -
pre-wrap：保留空格和换行符、**允许自动换行**（适合展示用户输入的带格式文本） -
pre-line：合并空格、保留换行符、允许自动换行（适合日志类内容）
注意：pre 类值在 IE7 及怪异模式下不生效，break-spaces 在 Safari 15.4+ 才稳定支持。
表格里 <p> 不换行的特殊处理
在 <td> 中放 <p> 并想让它不换行，光写 white-space: nowrap 很容易失效：
-
<td>默认有table-layout: auto，列宽由内容撑开，nowrap失去约束对象 - 必须给
<table>设table-layout: fixed，再给<td>设具体width（如width: 120px） -
<p>要加display: inline或display: inline-block，否则块级行为会破坏表格单元格高度计算 - 避免在
<td>上直接用white-space: nowrap—— 它会作用于整个单元格，可能让其他内容也溢出
真正可靠的写法是：<td style="width: 120px; table-layout: fixed"><p style="white-space: nowrap; display: inline; overflow: hidden">文本</p></td>
最常被忽略的点：white-space 不解决长单词断行，也不控制标点前后换行逻辑；它只管“空白符怎么处理”。要彻底禁断换行，得叠加 overflow-wrap: normal（禁用软换行）和 word-break: keep-all（中文防拆字），但代价是可能横向溢出——得自己权衡。
