white-space: nowrap 仍换行是因为它不控制长单词或url断行，浏览器会在/、-、.等处按默认规则折行；需配合overflow:hidden或text-overflow:ellipsis才能彻底禁断。
white-space: nowrap 为什么有时候还是换行了
因为 white-space 只控制“空白符如何处理”，不干预长单词或超长 URL 的断行行为。即使设了 nowrap，浏览器仍可能在不可见字符（如 /、-、.）处折行——这是默认的 word-break: normal + 断字规则共同作用的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认是否真有换行：用开发者工具检查元素实际宽度和父容器是否溢出，有时是父容器
width不足导致视觉“换行” - 若需彻底禁断，必须配合
overflow: hidden或text-overflow: ellipsis（后者需同时设white-space: nowrap+overflow: hidden+width） - 注意
white-space: nowrap对内联元素（如<span></span>）生效，但对块级元素（如<p></p>）仅影响其内部文本排版，不影响自身换行
word-break: break-all 和 break-word 已被废弃
break-word 不是标准属性值，是旧版 WebKit 的私有写法，现代 CSS 中已被 overflow-wrap: break-word 取代；而 word-break: break-all 虽仍有效，但会无差别切断任意单词（包括英文、中文、URL），容易破坏可读性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
overflow-wrap: break-word：只在必要时（单词超容器宽）才断行，保留语义完整性 - 慎用
word-break: break-all：适合纯数据展示（如日志 ID、哈希值），不适合正文或用户可见文案 - 中文场景下，
word-break: keep-all可防止中英文混排时错误拆分汉字，但对英文长词无效，需搭配overflow-wrap
中文换行失效？检查 line-break 和 word-break 组合
中文默认按字断行，但遇到数字+字母组合（如 v2.3.1）、邮箱、URL 时，浏览器可能按 Unicode 断行规则在 . 或 @ 处切开——这和 line-break 的取值强相关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
line-break: strict可收紧中文/日文断行逻辑（Chrome 58+、Firefox 63+ 支持），减少意外断点 - 对含大量技术字符串的容器，推荐组合：
word-break: keep-all; overflow-wrap: break-word，既保中文不断字，又容错长英文串 - 不要依赖
word-break: break-all解决中文问题——它会让“操作系统”变成“操…作…系…统”，毫无意义
pre 标签里 white-space 生效但换行符被忽略？
<pre class="brush:php;toolbar:false;"></pre> 默认是 white-space: pre，应保留换行符和空格，但如果父元素设了 white-space: nowrap，会层叠覆盖子元素的 pre 行为——CSS 的层叠优先级高于元素默认样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<pre class="brush:php;toolbar:false;"></pre>显式重置：white-space: pre或pre-wrap，避免被祖先节点污染 - 调试时右键“检查元素”，看 computed 样式中
white-space最终值是什么，而不是只看声明位置 - 若需在
<pre class="brush:php;toolbar:false;"></pre>内强制单行显示（如代码摘要），用white-space: nowrap+overflow-x: auto，别删换行符
真正麻烦的是混合场景：中英数字混排 + 动态宽度 + 移动端缩放。这时候没有一招鲜，得靠 overflow-wrap 守底线、word-break 控边界、line-break 调语种，三者配着试。别省那几行 CSS，漏一个就可能在 iOS Safari 上突然断错行。
