WordPress诗歌排版：换行后缩进与导出兼容问题求助

我之前也踩过类似的诗歌排版+导出兼容的坑，给你几个不用JS的纯CSS解决方案，应该能完美适配你的需求：

方案1：使用CSS hanging-indent 属性（推荐，现代浏览器友好） #

这是最简洁的方案，专门为悬挂缩进设计，能自动让段落内所有换行（包括<br>强制换行）实现首行顶格、后续行缩进的效果：

.Verse {
  /* 首行悬挂缩进2em，后续所有行自动缩进2em */
  hanging-indent: 2em;
  /* 设置行间距，确保导出后行距正常 */
  line-height: 1.6;
  /* 段落之间的间距，用于区分不同诗歌段落，导出时能识别 */
  margin: 0 0 1.5em 0;
}

这个属性现在主流浏览器（包括WordPress常用导出插件的渲染引擎）都支持，完全不需要修改HTML结构，直接把整段诗歌放在一个<p class="Verse">里，用<br>分隔每行即可。

方案2：兼容旧引擎的 ::first-line 方法 #

如果你的导出插件对hanging-indent支持不好，可以用兼容性更好的伪元素方案，原理是给整个段落加左内边距，再把首行向左偏移：

.Verse {
  /* 整个段落左内边距2em */
  padding-left: 2em;
  line-height: 1.6;
  margin: 0 0 1.5em 0;
}

/* 选中段落的第一行，向左偏移2em，抵消padding */
.Verse::first-line {
  text-indent: -2em;
}

这个方案的效果和方案1完全一致，而且所有CSS引擎都能识别，导出插件几乎不会忽略这些基础属性。

补充：WordPress编辑技巧 #

在WordPress后台编辑时，你可以：

• 切换到「文本」模式手动插入<br>
• 在「可视化」模式下按 Shift+Enter 插入换行（自动生成<br>），按普通Enter生成新的<p class="Verse">（用于区分诗歌段落）

应急方案：手动包裹首行（适合批量处理） #

如果上面的CSS方案都被导出插件忽略，那就用最稳妥的手动标记法：给每个诗歌段落的首行内容包裹一个<span>，然后用负边距实现偏移：

HTML结构：

<p class="Verse">
  <span class="verse-first-line">Verse Line 1</span><br>
  Verse Line 2<br>
  Verse Line 3
</p>

CSS：

.Verse {
  padding-left: 2em;
  line-height: 1.6;
  margin: 0 0 1.5em 0;
}

.verse-first-line {
  margin-left: -2em;
}

如果你的诗歌内容是批量导入的，可以用正则表达式批量替换，比如在WordPress数据库中替换<p class="Verse">([^<]+)为<p class="Verse"><span class="verse-first-line">$1</span>，快速完成标记。

这些方案都不需要修改导出插件代码，也不用JS，完全靠CSS和HTML结构解决问题，应该能满足你的需求。

内容的提问来源于stack exchange，提问作者Oberon