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

Question

我下面有代码段。 如果您按“运行代码段”，则会看到以下内容

  

1-p.getClientRects（）。length

     

2-span.getClientRects（）。length

但是，如果先按“扩展代码段”，然后按“运行代码段”，则结果会有些不同：

  

1-p.getClientRects（）。length

     

1-span.getClientRects（）。length

我只想了解Element.getClientRects（）方法。但是这种情况使我崩溃了。您能解释一下为什么会产生不同的结果吗？

我的浏览器是：Chrome版本67.0.3396.99（正式版本）（64位）

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

未展开，文本自动换行，因此您有两个单独的矩形：

展开后，文本全部适合一行，因此只有一个矩形：