HTML5诗歌排版技巧：段落缩进与换行处理

</code> 会渲染为真实空白段落</li>
<li>配合 CSS 可改字体：<code>.poem { font-family: "Noto Serif SC", serif; }</code></li>
</ul><h3>需要响应式或混排时，用 <code>white-space: pre-line</code></h3>
<p>当诗歌要嵌在普通段落流中（比如图文混排博客），<code><pre></code> 的等宽字体和固定块行为可能突兀。此时改用 <code><div></code> + CSS 更灵活：</p>
<pre class="brush:php;toolbar:false"><div class="poem-inline">
    孤帆远影碧空尽，<br>
        惟见长江天际流。
</div>

对应 CSS：

.poem-inline {
  white-space: pre-line;
  line-height: 1.6;
}
.poem-inline br {
  display: block;
}

• white-space: pre-line 保留换行符（
或 \n），但合并多余空格，适合手动控制换行+自然缩进
• 缩进改用 text-indent 或 padding-left，避免依赖空格导致响应式错位
• 慎用 white-space: pre-wrap：它虽保留空格，但会在窄屏强制折行，破坏诗句完整性

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

中文诗歌常用全角顿号、书名号、破折号，这些在

 里没问题，但要注意：

避免用 ASCII 破折号 --- 代替中文破折号 ——，后者占两个字符宽度，缩进计算会偏移
如果诗歌含古籍异体字（如「峯」「羣」），确保页面声明  且字体支持
不要用 
 替代诗歌容器——它语义是“引用”，且默认有 margin 和斜体，干扰视觉节奏
真正难的不是怎么写，而是判断哪一行该缩进、哪处空行不可删——这得看原诗手稿或权威出版物，HTML 只负责忠实呈现。
好了，本文到此结束，带大家了解了《HTML5诗歌排版技巧：段落缩进与换行处理》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

    

        
您即将跳转至第三方网站，请注意保护好个人信息和财产安全！
        继续访问