诗歌排版不能只靠<p>自动换行，因其语义为段落而非视觉行，会导致折行破坏诗意；应根据需求选用<pre>（保格式）或<p>+<br>（可交互），并注意空格处理与无障碍适配。
诗歌排版为什么不能只靠 <p> 自动换行
浏览器对 <p> 的默认处理是「语义段落」，不是「视觉行」。诗句之间需要精确的换行、缩进和空行控制，而 <p> 会自动加 margin、强制两端对齐、且内部文本随窗口宽度折行——这会让「床前明月光，疑是地上霜」被切成两行显示，破坏原意。
常见错误是把整首诗塞进一个 <p> 里，再用多个 <br> 强行换行：既语义混乱（一行诗 ≠ 一个段落），又难以维护（改格式要动一堆 <br>）。
-
<p>适合散文式内容，不适合固定分行文本 - 单靠
<br>会导致屏幕阅读器误读为“一句话中间多次停顿”，影响可访问性 - 响应式场景下，
<br>不会随字体缩放或布局变化自适应，容易错位
用 <pre> 保留原始格式最省事
如果诗歌已按需排好（含空格缩进、空行分节），<pre> 是最快方案：它原样渲染所有空白符和换行，不折行、不合并空格。
注意三点：
立即学习“前端免费学习笔记（深入）”；
- 缩进必须用空格，别用 Tab 键（部分编辑器/传输过程可能转为空格或丢失）
- 空行直接敲回车，
<pre>会渲染为真实空白段落 - 默认等宽字体难看，加 CSS 换字体：
.poem { font-family: "Noto Serif SC", serif; white-space: pre; }
示例：
<pre class="poem"> 春风又绿江南岸， 明月何时照我还？ ——王安石《泊船瓜洲》 </pre>
需要样式控制或混排时，用 <p> + <br> 组合
当诗歌要嵌在普通文章流中（比如博客正文里插一首诗），或每行需单独加 class、hover 效果、点击事件时，<pre> 的块级独占行为太僵硬，此时该用 <p> 包裹整首诗，内部用 <br> 分行。
关键操作：
- 给外层
<p>加margin: 0;和line-height控制行距，避免段落默认间距干扰 - 每行诗句末尾放
<br>，但最后一句不加（否则多出空行） - 首行缩进用
text-indent，别用空格——空格在<br>场景下会被忽略
示例：
<p class="poem-line">床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>
CSS：
.poem-line { margin: 0; line-height: 1.6; text-indent: 2em; }
<pre> 和 <p>+<br> 的兼容性与性能差异
<pre> 在所有浏览器中行为一致，解析快，但缺点是：无法对单行做 hover 或 transition；SEO 中可能被识别为代码块而非文本；移动端缩放时，长诗句可能横向溢出。
<p>+<br> 更灵活，支持现代 CSS（如 white-space: pre-line 可兼顾换行与折行），但要注意：
-
<br>是语义换行，仅用于地址、诗歌、歌词这类有明确分行意图的场景，别用来造间距 - 若诗歌行数多（>20 行），
<pre>渲染性能略优；动态生成诗句时，<p>+<br>更易用 JS 拼接 - 无障碍方面，
<pre>配合role="text"比一堆<br>更利于屏幕阅读器理解结构
真正容易被忽略的是空格处理——无论用哪种方式，中文诗歌里的全角空格、不间断空格（ ）、零宽空格都可能在复制粘贴或 CMS 编辑时被过滤或转义，上线前务必检查源码是否仍是预期字符。
