[css] 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.

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.

Yes you can ignore this <br>. You may need this especially in case of responsive design where you need to remove breaks for mobile devices.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

CSS for mobile example

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

Check out this Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

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.

This is how I do it:

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

You can simply convert it in a comment..

Or you can do this:

br {
display: none;
}

But if you do not want it why are you puting that there?

As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik C approach you need to add "float" right" attribute.

Check the example here. This CSS works in Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)

br {
   content: " ";  
   float:right; 
}

I hope this will answer your question!!

For me looks better like this:

Some text, Some text, Some text

br {_x000D_
  display: inline;_x000D_
  content: '';_x000D_
}_x000D_
_x000D_
br:after {_x000D_
  content: ', ';_x000D_
  display: inline-block;_x000D_
}

<div style="display:block">_x000D_
  <span>Some text</span>_x000D_
  <br>_x000D_
  <span>Some text</span>_x000D_
  <br>_x000D_
  <span>Some text</span>_x000D_
</div>

You can use span elements instead of the br if you want the white space method to work, as it depends on pseudo-elements which are "not defined" for replaced elements.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

DEMO

The line break is simply achieved by setting the appropriate span element to display:block.

By using IDs and/ or Classes in your HTML markup you can easily target every single or combination of span elements by CSS or use CSS selectors like nth-child().

So you can e.g. define different break points by using media queries for a responsive layout.

And you can also simply add/ remove/ toggle classes by Javascript (jQuery).

The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: Can I use - CSS Generated content).

As an alternative it is also possible to add a line break via pseudo-elements:

span.break:before {  
    content: "\A";
    white-space: pre;
}

DEMO

While this question appears to already have been solved, the accepted answer didn't solve the problem for me on Firefox. Firefox (and possibly IE, though I haven't tried it) skip whitespaces while reading the contents of the "content" tag. While I completely understand why Mozilla would do that, it does bring its share of problems. The easiest workaround I found was to use non-breakable spaces instead of regular ones as shown below.

.noLineBreaks br:before{
content: '\a0'
}

Have a look.

For that you can just do like this:

br{display: none;}

and if it is inside some PRE tag, then you can and if you want the PRE tag to behave like a regular block element, you can use this CSS :

pre {white-space: normal;}

Or you can follow the style of Aneesh Karthik C like :

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

I think you got it