HTML5如何排版诗歌格式_诗歌段落缩进与换行特殊处理【教程】

html5中用标签配合空白符和css可精准还原诗歌排版，因原生保留换行、空格与空行；会合并空白导致格式丢失；混排时可用white-space:pre-line替代；需注意中文标点、编码及字体支持。

HTML5 本身不提供“诗歌排版”专用语义，但用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; + 合理的空白符 + 少量 CSS 控制，就能精准还原诗歌的缩进、换行和空行——关键不是加样式，而是保留作者原始排版意图。&lt;/strong&gt;&lt;/p&gt; &lt;H3&gt;为什么不能直接用 &lt;code&gt;&lt;p&gt;&lt;/code&gt; 套诗句&lt;/H3&gt; &lt;p&gt;浏览器会自动合并连续空格、忽略换行符、折叠空行。&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;p&gt;春风又绿江南岸&lt;br&gt;明月何时照我还</pre> 渲染出来是连在一起的一行，缩进也完全丢失。除非你给每个词都套 <code><span></span> 加 margin-left，否则无法稳定复现原诗格式。

<pre class="brush:php;toolbar:false;">&lt;/code&gt; 是最简可靠的起点&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 默认保留所有空白符和换行，且等宽字体下对齐更可控。它不是“过时标签”，而是 HTML5 中唯一原生支持文本格式保真的块级元素。&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;poem&quot;&gt; 春风又绿江南岸， 明月何时照我还？ ——王安石《泊船瓜洲》 </pre> <ul> <li>缩进用空格（不是 <code> ），避免语义污染

空行直接敲回车，<pre class="brush:php;toolbar:false;">&lt;/code&gt; 会渲染为真实空白段落&lt;/li&gt; &lt;li&gt;配合 CSS 可改字体：&lt;code&gt;.poem { font-family: &quot;Noto Serif SC&quot;, serif; }&lt;/code&gt;&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;需要响应式或混排时，用 &lt;code&gt;white-space: pre-line&lt;/code&gt;&lt;/H3&gt; &lt;p&gt;当诗歌要嵌在普通段落流中（比如图文混排博客），&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 的等宽字体和固定块行为可能突兀。此时改用 &lt;code&gt;&lt;div&gt;&lt;/code&gt; + CSS 更灵活：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1461&quot; title=&quot;VIVA&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680148246307.png&quot; alt=&quot;VIVA&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/1461&quot; title=&quot;VIVA&quot;&gt;VIVA&lt;/a&gt; &lt;p&gt;一个免费的AI创意视觉设计平台&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1461&quot; title=&quot;VIVA&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;div class=&quot;poem-inline&quot;&gt; 孤帆远影碧空尽，&lt;br&gt; 惟见长江天际流。 &lt;/div&gt;</pre> <p>对应 CSS：</p> <pre class="brush:php;toolbar:false;">.poem-inline { white-space: pre-line; line-height: 1.6; } .poem-inline br { display: block; }</pre> <ul> <li> <code>white-space: pre-line 保留换行符（<br> 或 \n），但合并多余空格，适合手动控制换行+自然缩进

缩进改用 text-indent 或 padding-left，避免依赖空格导致响应式错位

慎用 white-space: pre-wrap：它虽保留空格，但会在窄屏强制折行，破坏诗句完整性

特殊符号与标点兼容性注意

中文诗歌常用全角顿号、书名号、破折号，这些在 <pre class="brush:php;toolbar:false;"></pre> 里没问题，但要注意：

• 避免用 ASCII 破折号 --- 代替中文破折号 ——，后者占两个字符宽度，缩进计算会偏移
• 如果诗歌含古籍异体字（如「峯」「羣」），确保页面声明 <meta charset="UTF-8"> 且字体支持
• 不要用 <blockquote></blockquote> 替代诗歌容器——它语义是“引用”，且默认有 margin 和斜体，干扰视觉节奏

真正难的不是怎么写，而是判断哪一行该缩进、哪处空行不可删——这得看原诗手稿或权威出版物，HTML 只负责忠实呈现。