CODEWITHSUNDEEP
htmlcss
vsync
vsync

Reputation: 130770

<br> not causing new line on Chrome

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.

Upvotes: 1

Views: 17128

Answers (3)

PlantTheIdea
PlantTheIdea

Reputation: 16369

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.

Upvotes: 2

vsync
vsync

Reputation: 130770

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.

Upvotes: 2

Jako
Jako

Reputation: 4901

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

<br />&nbsp;

Upvotes: 1

Related Questions