Ignore br with CSS

Question

I m working on a site which has line breaks inserted as  lt br gt  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

User · Answer

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

User · Answer

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   lt p gt     To break lines lt span class  line-break  gt in a paragraph  lt  span gt  lt span gt don t use lt  span gt  lt span gt the  br  element  lt  span gt   lt  p gt    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

User · Answer

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

User · Answer

This is how I do it    br        display  inline      content           clear none

User · Answer

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

User · Answer

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  lt br gt    For instance the above answers will turn  Monday lt br gt 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 lt br gt 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  lt h3 gt   just add a h3 each before br and br after  for instance   It works most generally for a pseudo-tag

User · Answer

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

User · Answer

For me looks better like this   Some text   Some text   Some text   x000D   x000D  br   x000D    display  inline  x000D    content      x000D    x000D   x000D  br after   x000D    content        x000D    display  inline-block  x000D    x000D   lt div style  display block  gt  x000D     lt span gt Some text lt  span gt  x000D     lt br gt  x000D     lt span gt Some text lt  span gt  x000D     lt br gt  x000D     lt span gt Some text lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Yes you can ignore this  lt br gt   You may need this especially in case of responsive design where you need to remove breaks for mobile devices   HTML   lt h2 gt     Where ever you go  lt br class  break  gt  i am there    lt  h2 gt    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

User · Answer

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

User · Answer

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

[css] Ignore <br> with CSS?

Examples related to css