DEV Community

Yoan Malié
Yoan Malié

Posted on

Don't use the br + br selector to hide the superfluous carriage return.

You probably see some advice on the web and especially on Twitter about this selector:

br + br {
  display: none;

Theorically, you want to hide the superfluous <br> elements that are sometime added by a text editor in a CMS when you hit Enter. This selector seem pretty neat! This Tweet from Harry Robert who got a lot of Retweets and Likes, mention this tip.

But do you know what is really happening…?

Let's give a look on this Pen I made. It's a simple text with some carriage returns added on it. You will notice that I added two siblings <br><br> tag and this is the second one that we want to hide with this selector!

The fact is that the <br> tag is part of the text DOM, you will see that all the <br> tag except the first will be hiden. This will completely interfere with the reading by showing us some big parts of unreadable text.

I'm curious if you know others tips to get rid of bad outputs from CMS. Let me know!

Top comments (0)