HTML中连续空格会被浏览器合并为一个，需用 实现不可断行的空格；排版用CSS（如text-indent、padding）、内容格式用white-space:pre-wrap或标签，避免语义与样式混用。
直接敲空格键在HTML里基本无效——浏览器会把连续空格、换行、制表符全合并成一个空格，这不是bug，是规范行为。想精确控制空格、换行、缩进，必须分层处理：语义内容用实体或标签，样式排版用CSS，二者混用反而容易失控。
怎么让多个空格真正显示出来
普通空格键输入的空格会被合并， 是唯一可靠的内容层解法。它对应Unicode \u00A0，不被合并，也不允许在它前后断行。
- 需要3个空格？写
- 中文缩进两字宽？优先用
text-indent: 2em，而不是塞两个 - 数字和单位之间防断行（如
100 px），这是 - 别用
white-space: pre-wrap 是处理用户提交文本的默认选项
表单里用户按了回车、打了多个空格，后端吐出来的字符串含\n和\t，但直接放进<div>里，这些字符全被当普通空格处理，段落“塌”成一行。
<ul>
<li>用<code>white-space: pre-wrap：保留所有\n、\t、空格，同时允许在容器右边界自动折行
text-overflow: ellipsis一起用——pre-wrap不支持省略号，会彻底失效white-space: pre替代它：虽然保留格式，但长行会横向溢出，还得额外加overflow-wrap: break-word
pre-wrap比包裹一堆 和<br>干净得多
table td 不换行？先查 white-space: nowrap
表格单元格本该自动换行，但Bootstrap、Ant Design等框架常给td加white-space: nowrap，导致URL、长英文单词撑开整张表。
立即学习“前端免费学习笔记（深入）”；
- 修复只需一行CSS：
td { white-space: normal; overflow-wrap: break-word; } -
overflow-wrap: break-word是标准名，word-wrap: break-word是旧别名，优先用前者 - 必须配合
width或max-width，否则浏览器不知道在哪折 - 慎用
word-break: break-all：中文会断在字中间，比如“排版”变成“排
版”，阅读体验极差
什么时候该用 标签</H3>
<p><code><pre class="brush:php;toolbar:false;"></code>不是“多打几个空格的快捷方式”，它是语义化容器，表示内容本身具有格式意义——比如代码、ASCII图、诗歌。</p>
<ul>
<li>代码块必须用<code><pre class='brush:php;toolbar:false;'>...
，否则缩进和换行全丢
<pre class="brush:php;toolbar:false;"></pre>，再用CSS调字体：font-family: ui-monospace, monospace
<pre class="brush:php;toolbar:false;"></pre>包普通段落：它默认有上下margin，字体是等宽的，视觉突兀且语义错误display: grid或flex比<pre class="brush:php;toolbar:false;"></pre>更现代、更可控最难搞的从来不是空格本身，而是中文排版里的避头尾、标点挤压、全角半角混排——这些 和white-space都管不了，得靠line-break: strict、text-rendering: optimizeLegibility，甚至专门的排版库。
