元素溢出容器的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>