How come line breaks aren’t working in Chrome?

You can clearly see line breaks not working inside Chrome here.

Unless I’m doing it wrong.

The text highlight should stop before <br/>

It’s not dong that in Chrome.

https://jsfiddle.net/owvjh0Lp/7/

<p class="my-content">
  <span>Some randm text text text text<br/> Some randm text text text text<br/> Some randm text text text text</span></p>

Chrome:

Firefox:

I’m not seeing the same problem. However I will say this:

There is no guarantee that every browser will be exactly the same. They may even have slightly different interpretations and have different margins and padding. It’s better than it used to be, but still people often like to reset the css or use a normalize packages to get everything as close as possible.

That being said, it seems to me (imho, I’m no expert here) that you are using the elements oddly. To me, a p element is a paragraph. You can use spans inside it, often to allow targeting with css or js. But once you start adding in line breaks (to me at least) you’re dealing with a new paragraph.

If you really want absolute control, you might consider a grid/table system or wrapping each line it it’s own p (or whatever) and giving them a class so you can control them.

1 Like