Question about CSS formatting and spacing.
I need to automatically break sentences into new lines based on the width of the container. For example, a sentence like: This is a sentence should be displayed as:
This is<br>a sentence
I am trying to achieve this in the code snippet below. The text lines should have spaces between them highlighted with a white color. However, setting a background color like background-color: black does not create the desired effect by adjusting the line-height. I also attempted using a linear-gradient as a background without success.
To accomplish this, one approach could involve wrapping lines in span tags, but I prefer to avoid extra backend work.
Is there an obvious solution that I may have overlooked or is it a more complex issue?
div {
width: 200px;
}
h1 {
background-color: red;
line-height: 50px;
}<div>
<h1>Some text and its wrapping</h1>
</div>