Fat Pixel Blog

Multi-line padded text with background

For years, there was an effect that made some of the best front-end developers come up with all kinds of solutions.

What effect, you ask? Well the multi-line padded text effect. A sort of ticker-tape, lines of text with a background-color and some padding around it.

The problem

The underlying problem is the box and inline model of CSS. You want a padding on an inline element, but when the inline element wraps multiple lines, the padding is not added to the end of the line, but only to the end of the inline element. Simple problem, but how to solve it?

The solution

As I said, there are all kinds of smart solutions. CSS tricks has a great overview of all solutions.

This article on CSS tricks is from 2014! Whew. And back then, I believe the ultimate solution wasn't even added to this article.

I can say I've tried quite a number of these techniques in production, to mixed success.

box-decoration-break

The solution is: box-decoration-break. At the time of writing it's supported in all mayor browsers, and it makes our lives as front-enders so much easier.

It's as simple as this:

This is best demonstrated with a simple demo Codepen:

See the Pen Multi-line padded text with background by Marijn Tijhuis (@fatpixelstudio) on CodePen.

You want to go in-depth even more? Read this extensive deep-dive by Coco. It's way more eloquent and extensive then I can ever manage :)

Also: always check out the MDN documentation on box-decoration-break, they are always helpful.