Ignore <br> with CSS?

I'm working on a site which has line breaks inserted as <br> in some of the headings. Assuming I can't edit the source HTML, is there a way with CSS I can ignore these breaks?

I'm mobile optimising the site so I don't really want to use JavaScript.

Solution 1:

With css, you can "hide" the br tags and they won't have an effect:

br {
    display: none;
}

If you only want to hide some within a specific heading type, just make your css more specific.

h3 br {
    display: none;
}

Solution 2:

Note: This solution only works for Webkit browsers, which incorrectly apply pseudo-elements to self-closing tags.

As an addendum to above answers it is worth noting that in some cases one needs to insert a space instead of merely ignoring <br>:

For instance the above answers will turn

Monday<br>05 August

to

Monday05 August

as I had verified while I tried to format my weekly event calendar. A space after "Monday" is preferred to be inserted. This can be done easily by inserting the following in the CSS:

br  {
    content: ' '
}
br:after {
    content: ' '
}

This will make

Monday<br>05 August

look like

Monday 05 August

You can change the content attribute in br:after to ', ' if you want to separate by commas, or put anything you want within ' ' to make it the delimiter! By the way

Monday, 05 August

looks neat ;-)

See here for a reference.

As in the above answers, if you want to make it tag-specific, you can. As in if you want this property to work for tag <h3>, just add a h3 each before br and br:after, for instance.

It works most generally for a pseudo-tag.

Solution 3:

If you add in the style

br{
    display: none;
}

Then this will work. Not sure if it will work in older versions of IE though.

Solution 4:

This is how I do it:

br { 
    display: inline;
    content: ' ';
    clear:none;
}