html - 样式块元素，其中每行都具有垂直间隙，并且除最后一行外，其余均为全宽

我想创造一个这样的标题

我在https://jsfiddle.net/hx4m9kfa/上试过一些东西，但是display: inline-block;和display: block或任何带有width: 100%的东西一样错误

h1, h2, h3 {
  background-color: orange;
  margin: 0 0 10px 0;
  font-size: 2em;
}
h2 {
  display: inline-block;
  background-color: green;
}

h3 {
  background-color: purple;
}

<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h1>
<h2>
Lorem ipsum dolor sit amet, conset
</h2>
<h2>
etur sadipscing elitr, sed diam nonumy eirmod
</h2>
<h2>
nonumy eirmod
</h2>

<h3>
Lorem ipsum dolor sit amet, conset
</h3>
<h3>
etur sadipscing elitr, sed diam nonumy eirmod
</h3>
<h3>
nonumy eirmod
</h3>

我希望整个标题只包含在一个标记中（如果可能的话，不包含JavaScript）。但每一个结果看起来都是理想的，我们将不胜感激。有人知道如何做到这一点吗？谢谢您！

最佳答案

div {
  text-align:justify
}

h1 {
    color:#fff;
    background: #888888;
    line-height: 1.3em;
    display:inline;
    -webkit-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -moz-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -ms-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -o-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
}

<div>
    <h1>
    Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam   nonumy eirmod lorem ipsum dolor sit amet
    </h1>
</div>

关于html - 样式块元素，其中每行都具有垂直间隙，并且除最后一行外，其余均为全宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38721402/