为什么使用getClientRects（）的相同代码会产生不同的结果？

Question

I have the code snippet below. If you press "Run code snippet" then you will see the following

1 - p.getClientRects().length

2 - span.getClientRects().length

But if you press "Expand snippet" at first, and then "Run code snippet" then you will see a bit different result:

1 - p.getClientRects().length

1 - span.getClientRects().length

I just want to understand Element.getClientRects() method. But this situation crashes me. Could you explain why it produces different results?

My browser is: Chrome Version 67.0.3396.99 (Official Build) (64-bit)

 var p = document.querySelector('p'); var span = document.querySelector('span'); console.log(p.getClientRects().length, "- p.getClientRects().length"); console.log(span.getClientRects().length, "- span.getClientRects().length"); 

 p { border: 1px solid green; } span { border: 1px solid red; } 

 <p> This is a paragraph with <span>Span Element having a looooooooooooooooooooooo nnnnnnnnnnnnnnnnnnnn ggggggggggggggggg text</span> </p> 

Answer 1

Un-expanded, the text wraps, so you have two separate rectangles:

Expanded, the text all fits on one line, so you have only one rectangle: