HTML5中用标签配合空白符和CSS可精准还原诗歌排版，因原生保留换行、空格与空行；会合并空白导致格式丢失；混排时可用white-space:pre-line替代；需注意中文标点、编码及字体支持。
HTML5 本身不提供“诗歌排版”专用语义，但用 + 合理的空白符 + 少量 CSS 控制，就能精准还原诗歌的缩进、换行和空行——关键不是加样式，而是保留作者原始排版意图。
为什么不能直接用
浏览器会自动合并连续空格、忽略换行符、折叠空行。
渲染出来是连在一起的一行，缩进也完全丢失。除非你给每个词都套春风又绿江南岸
明月何时照我还
margin-left，否则无法稳定复现原诗格式。
默认保留所有空白符和换行，且等宽字体下对齐更可控。它不是“过时标签”，而是 HTML5 中唯一原生支持文本格式保真的块级元素。
春风又绿江南岸，
明月何时照我还？
——王安石《泊船瓜洲》
- 缩进用空格（不是
- 空行直接敲回车，
会渲染为真实空白段落 - 配合 CSS 可改字体：
.poem { font-family: "Noto Serif SC", serif; }
需要响应式或混排时，用 white-space: pre-line
当诗歌要嵌在普通段落流中（比如图文混排博客）， 立即学习“前端免费学习笔记（深入）”； 对应 CSS： 中文诗歌常用全角顿号、书名号、破折号，这些在 真正难的不是怎么写，而是判断哪一行该缩进、哪处空行不可删——这得看原诗手稿或权威出版物，HTML 只负责忠实呈现。 相关文章 HTML5注释怎么写废弃标记_标记过时代码的注释写法与处理【方法】 html 如何美化_html页面美化技巧与CSS样式应用【详解】 HTML5布局如何实现瀑布流_纯CSS或JS辅助的瀑布流布局实现思路【教程】 HTML5如何设置文字颜色_颜色值与透明度调整方法汇总【指南】 HTML5结构标签在WordPress怎么用_主题模板修改技巧【技巧】 本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn 热门AI工具 的等宽字体和固定块行为可能突兀。此时改用
惟见长江天际流。
.poem-inline {
white-space: pre-line;
line-height: 1.6;
}
.poem-inline br {
display: block;
}
white-space: pre-line 保留换行符（text-indent 或 padding-left，避免依赖空格导致响应式错位white-space: pre-wrap：它虽保留空格，但会在窄屏强制折行，破坏诗句完整性特殊符号与标点兼容性注意
里没问题，但要注意：
--- 代替中文破折号 ——，后者占两个字符宽度，缩进计算会偏移 且字体支持 替代诗歌容器——它语义是“引用”，且默认有 margin 和斜体，干扰视觉节奏
