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:

.is-style-background {
    background: $color-darkgrey;
    color: $color-white;
    padding: 0 12px;
    display: inline;
    box-decoration-break: clone;

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 line-height and padding to make it look good.

4 Webmentions

  1. Avatar of Kilian FingerKilian Finger replied to this post:
    @schneyra TIL! 💯
  2. Avatar of pooliepoolie liked this post.
  3. Avatar of Kilian FingerKilian Finger liked this post.
  4. Avatar of Dominik SchwindDominik Schwind liked this post on twitter.

Other articles I've written recently