html默认压缩连续空白字符为单空格，需用white-space属性（如pre-wrap）精确控制；inline-block间隙源于字体渲染而非空格；php处理应先strip_tags再正则归一化空白。
不能替代 white-space：它只解决单个空格的“不换行”需求，对多空格、缩进、换行控制完全无效。真要精确控制空白，得靠 CSS 的 white-space 和 HTML 结构配合。
为什么连续空格在 HTML 里总被压成一个？
浏览器默认把所有连续空白字符（空格、制表符 \t、换行 \n）压缩为单个空格，这是 HTML 规范行为，不是 bug。哪怕你写 This<space><space><space>is<space><space>test</space></space></space></space></space>，渲染出来还是 “This is test”。
常见错误现象：
- 复制粘贴代码到页面后格式全乱
- 想用多个空格做缩进，结果首行没对齐
- 后台返回带缩进的富文本，
strip_tags()后仍残留大量\n和\t
真正起作用的是 white-space 属性，不是空格数量。比如：
<p style="white-space: pre-wrap"> Hello world\nThis is a new line.</p>
这段会保留缩进和换行，而默认 normal 模式下，所有空格和换行都失效。
white-space 各值的实际效果差异
white-space 不是开关，而是行为策略。选错值会导致文本溢出、换行异常或语义丢失。
-
normal：默认值，压缩空白、自动换行——适合普通段落 -
nowrap：不换行，但依然压缩空格——适合导航栏菜单项，别误用于长文本 -
pre：保留所有空白+禁止自动换行——适合代码块，但内容超宽会横向滚动 -
pre-wrap：保留空白+允许换行——最常用，兼顾格式与响应式 -
pre-line：合并空格但保留换行符——适合从用户输入（如textarea）直接渲染的文本
注意：pre-wrap 和 pre-line 对 \n 的处理逻辑不同：前者把每个换行符当真实换行，后者只把换行符当分段信号，再按单词折行。
inline-block 元素间的空隙不是空格，但表现像空格
写成这样：
<div class="container"> <span>A</span> <span>B</span> <span>C</span> </div>
即使 HTML 源码没空格，只要 span 是 display: inline-block，浏览器就会在它们之间插入约 4px 的间隙——这是字体中“空白字形”的渲染结果，不是 HTML 空格。
解决方案不是删源码空格，而是：
- 父容器设
font-size: 0，子元素重设font-size - 用
flexbox替代inline-block（推荐） - HTML 中把标签写在同一行：
<span>A</span><span>B</span>
最后一个方法最轻量，但可读性差；flexbox 是现代标准解法，彻底绕过空白问题。
PHP 后端清理 HTML 文本时的空白陷阱
用 strip_tags() 剥离标签后，原始 HTML 的换行、缩进、制表符全保留在字符串里。直接塞进 <textarea></textarea> 或 API 返回体，前端看到的就是一堆空行和错位。
正确做法是两步走：
- 先用
strip_tags($html)移除标签 - 再用
preg_replace('/\s+/', ' ', $text)把所有空白符（含\n、\t、\r）压成单空格 - 最后
trim()去首尾
如果需要保留段落换行（比如导出纯文本报告），就别压成空格，改用 preg_replace('/[\t\r\n]+/', "\n", $text)，再 trim()，这样每段之间只有一个 \n。
关键点：前端看到的“空格问题”，往往根子在后端没做空白归一化——别只盯着 HTML 怎么写，先检查数据流里哪一层放任了原始空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
