Automatic wrapped multiple line text with space between highlighted lines - html

Question

Question regarding CSS.
I will receive sentences like: This is a sentence and I will automatically break it to new lines regarding the parent's container width. So, for example, I will have
This is
a sentence
What I am trying to do can actually can be seen in this code example. The lines are highlighted but there is some space (with white color) between lines. When setting some color background-color: black I can't create such spaces changing line-height. I also tried setting linear-gradient as background but it doesn't work the way I wanted.
This can be done by wrapping lines in span tags, but I want to avoid additional backend work.
Is there any obvious solution I missed or is a little bit tricky?
div {
width: 200px;
}
h1 {
background-color: red;
line-height: 50px;
}
<div>
<h1>Some text and its wrapping</h1>
</div>

Answer 1

Without backend work it is simply not possible - you need a wrapping element for the fixed width.
But you don't need extra elements for each line. Check this:
div {
width: 200px;
display: block;
}
h1 {
background-color: red;
font-size: 36px;
font-weight: bold;
line-height: 50px;
display: inline;
}
<div>
<h1>This is a sentence.</h1>
</div>
Or you use pseudo elements:
div {
width: 200px;
display: block;
}
div:after {
background-color: red;
font-size: 36px;
font-weight: bold;
line-height: 50px;
display: inline;
content: attr(data-content);
}
<div data-content="This is a sentence."></div>