How come highlighted line breaks are different in Chrome?

Community
1

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.

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

Firefox:
image

2

which element is the background colour applied to?

Also, keep in mind that <br> tags are generally considered bad practice.

3

Says who?

Chrome just highlights the whitespace on the <br>

The line break is working in both browsers, that’s the only rule of the game the browsers have to follow.

4

He highlighted the text by selecting it with the mouse, no background color

1 Like
5

Oh right. I doubt the spec covers that! This is a very strange thing to worry about.

2 Likes
6

Chrome considers <br> whitespace, and firefox doesn’t?

Is that what you mean?

7

No, I may have not worded that correctly.
Chrome is allowing the whitespace node between the <br> and the word Some to be highlighted

<br/> Some

You should see the same results in both browser if you do this

<br/>Some

And btw, you can drop the closing slash and just use <br>

8

Still occurring in Chrome:

<span>Some randm text text text text<br/>Some randm text text text text<br/>Some randm text text text text</span></p>

image

9

Browsers should consider a <br> as a line break. It is an empty element and isn’t so much something that displays as it is an “instruction”.

Because the code example is misusing the <br> you can’t really expect browsers to have a “standard” to follow because there is none for the way it is being misused.

10

How would I be misusing it?

Is there a right way to do it?

11

Can I ask why your concerned how the text looks when it’s highlighted? In what scenario would this ever matter?

1 Like
12

You are using it to coerce inline elements to display more like block level elements.

13

As per the specs…

The br element

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

The following example is correct usage of the br element:


<p>P. Sherman<br> 
42 Wallaby Way<br> 
Sydney</p>
6 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.