html - 换行后悬挂对齐/缩进<br>？

Question

我正在用 WordPress 建立一个网站，很多内容都是诗歌。如果给定的一行诗断行，则应缩进。显然，每一行诗句都有一个中断，但由于内容需要响应，不能在任何给定行内插入中断和间距。

我最初使用的是 <br />因为在一节经文中换行，每节经文都在自己的<p>中.然而，text-indent仅适用于第一行文本。我确定的解决方案是创建一个这样的类:

.Verse {
    padding-left: 2em;
    text-indent: -2em;
    margin: 0;
        }

然后我会将 HTML 输入为

<p class="Verse">Verse Line 1
<p class="Verse">Verse Line 2
<p class="Verse">Verse Line 3
<p class="Verse">Verse Line 4</p>
<br />
<p class="Verse">Verse 2 Line 1...(etc)

有了额外的 <br />每节后处理0边距。该解决方案显示良好，因此希望我的搜索结束。但事实并非如此。

由于目前我无法控制的因素，我无法用 <p> 分隔每一行.原因是我使用的插件允许访问者将任何给定页面导出为 PDF、ePub 或 mobi，而该插件似乎无法读取段落样式。因此，当它导出像我上面所做的那样编码的内容时，它会忽略 margin 0;正如您所预料的那样，这会导致任何给定经文的每一行之间都有大量空白，并且各经文之间没有区别。

那么我该怎么做才能让我改为使用 <br /> 对其进行编码？行与行之间

<p class="Verse">Verse Line 1
<br />Verse Line 2
<br />Verse Line 3
<br />Verse Line 4</p>

<p class="Verse">Verse 2 Line 1...(etc)

哪个允许执行导出的插件保持适当的行间距？自 <br />不是我无法使用它控制样式的元素，但我需要做一些事情来获得 -2em 的缩进来调整行并补偿填充。

我认为可以创建一个具有 text-indent 的跨度-2em，我将它应用于 <br /> 之后每一行的第一个单词, 并让它内联工作，所以它后面的任何文本都会立即出现......但我无法弄清楚如何使它工作，即使它会。所以任何建议将不胜感激。谢谢!

(我已经在插件中四处寻找，试图弄清楚我是否可以强制它采用段落格式，并嵌入字体，就此而言，但我不知道 Javascript，也无法制作任何感觉上，插件作者似乎没有回应请求)。

Answer 1

好的，在发布那个问题之后我确实找到了一个使用 span 样式的解决方案:

CSS

.Verse {
    padding-left: 2em;
    text-indent: -2em;
        }

.vspace {
    margin-left: -2em;
}

HTML

<p class="Verse">Verse Line 1
<br /><span style="vspace">Verse</span> Line 2
<br /><span style="vspace">Verse</span> Line 3
<br /><span style="vspace">Verse</span> Line 4</p>

<p class="Verse">Verse 2 Line 1...(etc)

这似乎行得通。像这样编写代码有点痛苦，因为我放入的任何给定片段可能有数百行诗句，但至少它有效。

如果有人有更好或更精简的解决方案，我会对它们非常感兴趣!