用 white-space: pre-wrap 并搭配全角空格和等宽中文字体栈可解决诗歌排版空格合并问题；避免用普通空格缩进，改用 text-indent 或 padding-left；对齐需求优先采用 inline-block 或 css grid。
诗歌排版中空格被浏览器合并怎么办
HTML 默认会把连续的空白字符（空格、制表符、换行）压缩成一个空格，所以直接写 或多个 往往效果不可控，尤其在移动端或不同字体下容易错位。
用 white-space CSS 属性控制空格行为
这是最直接有效的方案，关键在于选对值：
-
white-space: pre：保留所有空白和换行，但不自动换行（超出容器会溢出） -
white-space: pre-wrap：保留空白和换行，且允许自动换行（推荐用于诗歌正文） -
white-space: pre-line：合并连续空格，但保留换行符（适合语义清晰、只靠换行分句的诗）
示例：
<p style="white-space: pre-wrap; font-family: 'Noto Serif SC', serif;"> 山高水远 <br> 云自无心 </p>注意：中文全角空格（
）比 更可靠，它在 pre-wrap 下宽度稳定，且不会被字体渲染截断。
避免用 堆砌空格做缩进
是非断行空格，但它本质是“字符”，受字体、字号、行高影响大；多层嵌套还可能被某些编辑器或 CMS 自动清理。
- 缩进统一用
text-indent（首行缩进）或padding-left（整段左移） - 诗句内部对齐（如“春风｜又绿｜江南岸”中的竖线对齐）不要依赖空格数，改用
display: inline-block+ 固定宽容器或 CSS Grid - 若必须用空格占位，优先用 Unicode 全角空格
响应式场景下空格错位怎么调
当页面缩放或换设备时，pre-wrap 里的全角空格可能因字体回退（fallback）导致宽度突变，比如从思源宋体切到系统默认黑体， 宽度可能从 1em 变成 0.9em。
- 强制指定等宽中文字体栈：
font-family: 'Source Han Serif', 'Noto Serif CJK SC', 'PingFang SC', 'Hiragino Sans GB', monospace; - 对关键对齐行加
font-variant-east-asian: tabular-nums;（部分浏览器支持），让全角字符宽度更一致 - 极端情况可改用
<span></span>包裹每组词，用width+inline-block硬控位置，但维护成本高
真正难的不是加空格，而是让同一行里「字」和「空」在各种环境里保持相对关系不变——这得靠 CSS 的渲染上下文，而不是靠敲多少个 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
