Ignore <br> with CSS?

Question

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;
}

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.

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 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

For me looks better like this:

Some text, Some text, Some text

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

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

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