getBoundingClientRect() 用于溢出容器的元素

Question

假设我们有一个文本溢出它的容器 div:

console.log(document.querySelector("p").getBoundingClientRect().width)

#myDiv {
  width: 20px;
  background-color: wheat;
  border: 1px solid #ddd;
}

<div id="myDiv">
  <p>foobarfoobarfoobarfoobarfoobar</p>
</div>

如您所见，容器 div 具有固定宽度 (20px)，但即使文本明显大于该宽度 getBoundingClientRect() 也不会超过该容器值。

在这种情况下，是否有其他方法可以获取文本元素的边界矩形？

Answer 1

尝试在 p 元素上设置 display: inline-block;，使其具有特定宽度：

console.log(document.querySelector("p").getBoundingClientRect().width)

#myDiv {
  width: 20px;
  background-color: wheat;
  border: 1px solid #ddd;
}

p {
   display: inline-block;
}

<div id="myDiv">
 <p>foobarfoobarfoobarfoobarfoobar</p>
</div>

getBoundingClientRect() for element overflowing the container