Why does the same code using getClientRects() produce different results?

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: