Is there a method to ensure that a div element wraps the lines similar to how a span does?
In this example, I utilized the span tag to create an appearance as if the text was highlighted by a yellow highlighter pen. Everything functions as intended:
<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>
https://i.sstatic.net/uZMQD.png
Now, let's consider another scenario. If I have multiple paragraphs and want to style them using the same approach, I can do so like this:
<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>
https://i.sstatic.net/1espK.png
Although the output appears satisfactory, I find the repetition of the class on every paragraph undesirable.
What I desire is something along the lines of:
<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>
However, the result is not what I hoped for - the large yellow rectangle is not desired.
https://i.sstatic.net/F9X3x.png
Is there a solution to fix this issue?