CSSCSS

How to replace line break tags (<br>) with spaces in CSS

Sep 22, 2020 · Updated: Jul 12, 2021 · by Tim Kamanin

Let's say you have a text separated by line break tags <br>, like this:

One file only.<br />
50 MB limit.<br />
Allowed types: gif, jpg, png, svg.<br />

And you want to turn the text into a single line, like that:

One file only. 50 MB limit. Allowed types: gif, jpg, png, svg.

If you don't have access to the HTML, you might be tempted to reach for JavaScript, but wait, my friend, put that big gun down, you can solve the task with the only CSS!

The trick here is to use the CSS content property.

We will solve it in two steps:

Step 1

Re-set the content of the line break tag to prevent it from, you guessed it, breaking a line. Add the following CSS code:

br {
  content: "";
}

Step 2

Add an empty space after the <br> tag:

br:after {
  content: " "; // note we've added space here.
}

And...done! Now line breaks should be replaced with spaces now. In production your styles might look like the following:

.flat-breaks br {
  content: "";
}

.flat-breaks br:after {
  content: " ";
}

As you see, we've nicely scoped the style under .flat-break class, so it's not global and can be used in places where it's really needed.

Hey, if you've found this useful, please share the post to help other folks find it:

There's even more:

Subscribe for updates

  • via Twitter: @timonweb
  • old school RSS:
  • or evergreen email ↓ ↓ ↓