html - 样式 block 元素，其中每行都有垂直间隙，除最后一行外都是全宽

Question

我正在尝试创建一个看起来像这样的标题

我在 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)。但是，每一个看起来都符合预期的结果将不胜感激。有谁知道如何实现这一目标？谢谢!

Answer 1

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>