让Div元素包裹像Span do

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

如果您对尾随突出显示的部分不满意，请添加span s：

.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>

Answer 2

你应该在这里举例display: inline; https://jsfiddle.net/serGlazkov/dhftwqt9/1/