html默认合并空格，诗歌排版需用 、white-space:pre-wrap或全角空格；推荐white-space:pre-wrap配合全角空格，兼顾兼容性、自动换行与中文排版稳定性。
HTML里空格被合并是默认行为
浏览器渲染时会把连续的多个空格、换行、制表符全部压缩成一个空格，这是 HTML 规范定义的“空白符折叠”规则。所以直接写 或敲四下空格，最终只显示一个空格——诗歌需要的缩进、对齐、字间留白全会丢失。
用 手动替换空格最直接
适用于短诗或固定格式，可控性强，兼容性极好（所有浏览器都支持）：
- 每个
- 比如“ 春风拂面”要保留两个汉字前的两个空格，写成：
春风拂面 - 注意不要混用普通空格和
- 缺点是可读性差、编辑麻烦，长诗维护成本高
white-space: pre 或 pre-wrap 更适合整段诗歌
给容器元素（如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或 <div>）加 CSS 样式，让浏览器按源码空格和换行原样渲染：
<ul>
<li>
<code>white-space: pre：保留空格和换行，但不自动换行（超宽会溢出）
white-space: pre-wrap：保留空格和换行，且内容过长时自动折行——诗歌排版推荐这个<p style="white-space: pre-wrap"> 山高 水远</p>，其中中文全角空格或英文空格都有效全角空格（ ）在中文诗里更稳妥
中文排版常用全角空格（Unicode U+3000）替代英文空格，它天然不会被折叠，也不依赖 CSS：
- 输入方式：中文输入法下按空格键（通常默认输出全角空格），或直接粘贴字符
- 在
<pre class="brush:php;toolbar:false;"></pre>外也能用，比如<p> 月落乌啼</p>，只要字体支持就显示正常 - 缺点是语义上不算标准空白符，复制到纯文本环境可能变乱码或丢失，且无法用 CSS 的
text-indent控制首行缩进 - 如果用
white-space: pre-wrap+ 全角空格，兼容性和视觉一致性最佳
真正麻烦的不是怎么加空格，而是混合使用时的隐性冲突：比如在 pre-wrap 容器里又塞了 ，或者用全角空格却忘了字体不支持显示为等宽——这些地方一错，整行对齐就偏了。
