为什么使用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

未展开,文本换行,因此您有两个单独的矩形:

扩展后,文本全部适合一行,因此您只有一个矩形: