Multi-Line Padded Text and box-decoration-break
Sometimes I get really happy when modern CSS solves a problem I've been fiddling around with for a long time.
From time to time over the last years, I've had to build a headline element that is supposed to have a padded colored background. Designers love that and it's actually easy to solve, as long as the text is short enough to fit in one line. Just set a
background-color and you're fine. Sadly, most of the time this is not the case. So it got ugly sometimes.
As usual there's an article on CSS-Tricks on that case well documenting many possible solutions. As I read the article I got sadder and sadder because the solutions were way more complicated as I like them to be. So I was very relieved when I ended up reading the last section about
box-decoration-break which is here documented on MDN.
Since it's 2022, why not give it a try? In the end it was just this little bit of CSS and it works fine in all major browsers:
padding: 0 12px;
For this clients website we're using PT Sans which renders fine in the boxes and gives us a little space between the lines. Other fonts might need some tweaking with
padding to make it look good.