Ignore <br> tags with CSS

So recently I came across an issue while styling up some breadcrumbs for a Wordpress site we are currently getting ready for launch at RefME.

The issue arises main when using a CMS of some kind for the content, this means titles can have unwanted styling occurrences when you reuse things like the title for other components of the website. Such as the breadcrumbs in our instance.

The problem was that the title entered had a br tag for styling reasons when displayed in the template. However, when we reuse this title in the breadcrumbs, it causes a styling issue breaking a link to two lines.

Turns out the fix is super easy! Simply set the br to display: none; with CSS!

.breadcrumbs br {
  display: none;
}

See the Pen Ignore
tags with CSS
by Michael Tempest (@mike-tempest) on CodePen.

Comments