Take a look at this simple example: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Here's what it includes:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>The horizontal padding is currently only applied to the beginning and end of the text where it wraps. I want it to apply to every line. While I'm fine with the border-radius not aligning perfectly with line breaks, I really need consistent padding.
Even when I add padding-top to the .header-text class, it still doesn't work consistently across wrapped lines. I'm puzzled as to why the horizontal padding is ignored at wrap points.
Is there a CSS solution for achieving this?