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