html - 让 Div 元素像 Span 那样换行

Question

有没有办法让 div 元素像 span 那样换行？

JSFiddle for testing

在这里，我使用了 span 标签使输出看起来像是被 yellow highlighter pen 高亮显示了一样。 .一切正常:

<p><span class="highlighter">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.</span></p>

<style>
.highlighter { background-color: yellow; }
</style>

再来看一个案例。现在，我有多个段落，我想用上面的方式来设置它们的样式。我可以这样使用:

<p><span class="highlighter">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<p><span class="highlighter">Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>

...输出看起来不错，但我不喜欢这种标记，因为它迫使我在每个段落上重复 class。

我想要的是这样的:

<div class="highlighter">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

...但是现在，输出失败了——黄色的大矩形不是我想要的。

有办法解决吗？

Answer 1

如果您对结尾的突出显示部分不满意，请添加 spans:

.highlighter span{
  background: #FFFF00;
}

<div class="highlighter">
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</sapn></p>
  <p><span>Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
</div>