1

Example page

enter image description here

I have some <span> elements which are inline-block and after the last <span> I have a <br> to break a new line (could be more than just one <br>).

The new line works on Firefox but doesn't work on Chrome (v. 24). Don't know why.

I write this so people who are searching the internet would have something to read regarding this matter, because I did not find anything on google/stackoverflow regarding this.

vsync
  • 118,978
  • 58
  • 307
  • 400

3 Answers3

2

as soon as u add content, it works. chrome just doesn't like giving you empty space.

try adding &nbsp; on the empty new line.

Edit: changing since there was so much discussion on the topic.

Firefox has a bug, it should not display the newline. According to W3C standards the element "must be used only for line breaks that are actually part of the content". Without content following the <br>, it will not create this newline.

PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40
  • i know as soon as i add content it will work. in my case i cannot add content. I just want to understand if this is a bug or normal behavior. this is for a very complex jquery plugin I'm creating, and this is a simplified demo of my problem. – vsync Feb 21 '13 at 17:13
  • i am looking for a clean way to solve this via CSS without adding DOM – vsync Feb 21 '13 at 17:14
  • 2
    looks like Firefox has the bug. it doesn't do a new line in Opera or IE either – PlantTheIdea Feb 21 '13 at 17:15
  • normally Firefox is in-line with W3C and chrome is behind, so I wouldn't count on that. and Opera is very very shitty browser in terms of W3C support.. – vsync Feb 21 '13 at 17:16
  • please lets not start a browser war. the point is that what u are looking for only works on Firefox. and the bigger point is that you should test all possible browser-specific problems on all browsers. – PlantTheIdea Feb 21 '13 at 17:24
  • well, in my specific case I only care about Chrome and Firefox, and this is just insane, i mean, if you put a
    you would expect it to break a new line. but it doesn't..now I can't just call the Chrome team and ask them, why this doesn't work..I'm stuck at just not understanding the reason, and i didn't find any info on this on the internet..     – vsync Feb 21 '13 at 17:29
  • ur still attributing Chrome with the problem, when literally all browsers other than Firefox display the same behavior. i don't know what else to tell u other than there are many roads to the same place, so find a different one. and while ur at it, perhaps u should follow the W3C standard of
    rather than
    , as u recognize the value of these standards.     – PlantTheIdea Feb 21 '13 at 17:32
  • is the way, not
    , which is XHTML. you can read here: http://stackoverflow.com/a/1946446/104380     – vsync Feb 21 '13 at 17:33
  • ah, i stand corrected, my mistake. now, back to u stopping the complaints about something you can't change, and moving on. – PlantTheIdea Feb 21 '13 at 17:34
  • your answer and attitude do not help this issue at hand. everything is solvable, and what is not, must be account for a reason, or some document that said how this case should be handles per-browser. just saying "you're whine about a problem i have no idea how to fix" is not cool dude. – vsync Feb 21 '13 at 17:53
  • "This element must be used only for line breaks that are actually part of the content". You have no content following, so there is no line break applied. source: http://www.w3.org/wiki/HTML/Elements/br – PlantTheIdea Feb 21 '13 at 17:58
2

Solved: http://jsbin.com/ezatoy/32/edit

By adding a ZERO WIDTH SPACE to the container element like so:

div:after{ content:'\0200B'; }

This insures that there will be some content after the last <br> occurrence, effectively breaking into a new line. no need to add/change any DOM.

vsync
  • 118,978
  • 58
  • 307
  • 400
1

Might not be the best solution, but if you add a white space after the <br /> it works in Chrome.

<br />&nbsp;
Jako
  • 4,731
  • 7
  • 39
  • 54