html中连续空格会被浏览器合并为一个，需用 实现不可断行的空格；排版用css（如text-indent、padding）、内容格式用white-space:pre-wrap或标签，避免语义与样式混用。

直接敲空格键在HTML里基本无效——浏览器会把连续空格、换行、制表符全合并成一个空格，这不是bug，是规范行为。想精确控制空格、换行、缩进，必须分层处理：语义内容用实体或标签，样式排版用CSS，二者混用反而容易失控。

怎么让多个空格真正显示出来

普通空格键输入的空格会被合并， 是唯一可靠的内容层解法。它对应Unicode \u00A0，不被合并，也不允许在它前后断行。

• 需要3个空格？写   ，别用空格键连按三次
• 中文缩进两字宽？优先用text-indent: 2em，而不是塞两个 
• 数字和单位之间防断行（如100 px），这是 最正当的用途
• 别用 做按钮内文字对齐或列表项缩进——padding/margin更可控、可访问性更好

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

动态渲染Markdown或日志时，pre-wrap比包裹一堆 和

<br>

干净得多

table td 不换行？先查 white-space: nowrap

表格单元格本该自动换行，但Bootstrap、Ant Design等框架常给td加white-space: nowrap，导致URL、长英文单词撑开整张表。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 修复只需一行CSS：td { white-space: normal; overflow-wrap: break-word; }
• overflow-wrap: break-word是标准名，word-wrap: break-word是旧别名，优先用前者
• 必须配合width或max-width，否则浏览器不知道在哪折
• 慎用word-break: break-all：中文会断在字中间，比如“排版”变成“排
  版”，阅读体验极差

什么时候该用

 标签

<pre class="brush:php;toolbar:false;"></pre>不是“多打几个空格的快捷方式”，它是语义化容器，表示内容本身具有格式意义——比如代码、ASCII图、诗歌。

• 代码块必须用<pre class="brush:php;toolbar:false;">...</pre>，否则缩进和换行全丢
• 复制粘贴进去的文本含大量空格/制表符？先套<pre class="brush:php;toolbar:false;"></pre>，再用CSS调字体：font-family: ui-monospace, monospace
• 别用<pre class="brush:php;toolbar:false;"></pre>包普通段落：它默认有上下margin，字体是等宽的，视觉突兀且语义错误
• 如果只是想让一段话里某几行对齐，用CSS的display: grid或flex比<pre class="brush:php;toolbar:false;"></pre>更现代、更可控

最难搞的从来不是空格本身，而是中文排版里的避头尾、标点挤压、全角半角混排——这些 和white-space都管不了，得靠line-break: strict、text-rendering: optimizeLegibility，甚至专门的排版库。