javascript - 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()值也不会超过该容器值。

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

score 1 · Accepted Answer

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

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>

1 回答 1