javascript - 为什么使用 getClientRects() 的相同代码会产生不同的结果？

Question

我有下面的代码片段。如果您按“运行代码片段”，那么您将看到以下内容

1 - p.getClientRects().length

2 - span.getClientRects().length

但是如果您先按“展开代码片段”，然后再按“运行代码片段”，那么您会看到一些不同的结果:

1 - p.getClientRects().length

1 - span.getClientRects().length

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

我的浏览器是: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

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

展开后，所有的文本都在一行中，所以你只有一个矩形: