How to get the rectangle of the text in an element (not the rectangle of element itself)?
Sometimes the rectangle of the text in an element is different from the rectangle of the element itself. I know there are tow functions: Element.getBoundingClientRect() and Element.getClientRects(). but they can not find the rectangle of the text in an element.
For example, there is following element button: <button style="position:absolute; left:58px; top:324px; width:100px; height:40px;"> Both the span and the paragraph have a border set. </button> The text of the above button has gone out of the button. How can I get the rectangle of the text in this button?
All Replies (3)
Looks that that height property isn't large enough. Best is to set the height to auto to let the browser make all text fit.
<button style="position:absolute; left:58px; top:324px; width:100px; height:auto;"> Both the span and the paragraph have a border set. </button>
dai_juntang said
I know there are tow functions: Element.getBoundingClientRect() and Element.getClientRects(). but they can not find the rectangle of the text in an element.
A text node is not an element, so a text node doesn't have those two methods. Why do you need a rectangle instead of the textContent?
Thanks for your replies.
I have got the answer of my question in: https://stackoverflow.com/questions/58005936/how-to-get-the-rectangle-of-the-text-in-an-element-of-the-web-page-not-the-rect/58006078#58006078