如何获取网页元素中文本的矩形（不是元素本身的矩形）？

Question

有时元素中文本的矩形与元素本身的矩形不同。我想获取文本的矩形，而不是元素的矩形。

我尝试了两个 MDN 函数：Element.getClientRects()and Element.getBoundingClientRect()，但他们没有找到文本的矩形。

例如，有以下按钮：

<button style="position:absolute; left:58px; top:224px; width:100px; height:40px;">

  Both the span and the paragraph have a border set.

</button><br/>

getClientRects 和 getBoundingClientRect 都只找到按钮本身的矩形。

如何找到文本“跨度和段落都设置了边框。”的矩形？