带有语义HTML和CSS的诗歌换行符

Question

我只想使用HTML和CSS来显示诗歌。据我了解，在HTML中以语义方式正确构成诗歌的方式是对诗句使用<p>标签，对单行使用<br />标签，例如：

<p>
  poetry is very nice <br />
  but kind of hard to style <br />
  if only you could help me, guise, <br />
  I'd give you my best smile.
</p>

当这首诗有足够长的行可以包裹时，可接受的样式是将缩进的行悬挂缩进，如下所示：

  

这是一条很长的线，
  需要包装

理想情况下，包裹的部分将正确对齐，但是固定尺寸的悬挂式缩进也可以。

我已经看到了各种解决方案，但是它们都涉及语义上多余的HTML，例如对每行使用列表或<span>标签。例如：

.verse {
  margin-left: 2em;
}

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

<p class="verse">
  <span class="line">poetry is very nice </span><br>
  <span class="line">but kind of hard to style </span><br>
  <span class="line">if only you could help me, guise, </span><br>
  <span class="line">I'd give you my best smile.</span>
</p>

有没有一种方法可以使HTML变得整洁？

编辑（1）：示例代码出错。 .verse和.line都应声明一个margin-left属性，而不是padding-left和margin-left。

编辑（2）：关于可能的重复，我知道关于用HTML标记诗歌最正确的观点是不同的。我选择了我认为在语义上最正确的内容，这个问题是关于正确显示它所需的CSS。

编辑（3）：我错误地更正了示例中的错误。这是屏幕截图：

为澄清起见，我希望获得与上述屏幕截图相同的效果，但不带有<span>标签或任何其他语义上多余的标签。

Answer 1

考虑到2em中的padding和负数1.5em的{​​{1}}，只需给出以下内容的经文margin就可以简单地组合这两个值0.5em。这样一来，您就可以完全切掉padding标签，并获得完全相同的视觉输出：

<span>

.verse {
  padding-left: 0.5em;
}

Answer 2

您可以在段落的第一行中使用负数text-indent，并在整个段落中添加padding，即，您仅需要一个<p>元素。

.verse {
  text-indent: -20px;
  padding-left: 20px;
}

<p class="verse">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

祝你好运！

Answer 3

用法类似：

yarn test --coverage

关注：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-align-last

Answer 4

到目前为止，我想出的唯一简单的解决方案是执行换行符而不是换行符，并创建一个.poem类，该类占用了段落之间的空格（因此它充当换行符而不是换行符）

.poem { text-indent: -2em; margin: 0 0 0 2em;}

但是随后您必须仔细检查并在节之间添加双段（双空格）。这不是一个好的解决方案，但是比在每一行上粘贴类或创建列表要容易。

如果任何人都可以解决问题，那就太好了。 text-align-last：正确；具有类似的效果，但这不是传统的诗歌形式。