X
Kliknite sem pre prechod na mobilnú verziu webu.

Fórum podpory

How to get the rectangle of the text in an element (not the rectangle of element itself)?

Pridané

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?

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?
Priložené obrázky
Citácia
cor-el
  • Top 10 Contributor
  • Moderator
17470 riešení 157890 odpovedí

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>
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. ---- <pre><nowiki><button style="position:absolute; left:58px; top:324px; width:100px; height:auto;"> Both the span and the paragraph have a border set. </button></nowiki></pre>
Pomohlo vám to?
Citácia
jscher2000
  • Top 10 Contributor
8690 riešení 71037 odpovedí

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?

''dai_juntang [[#question-1269126|said]]'' <blockquote> I know there are tow functions: Element.getBoundingClientRect() and Element.getClientRects(). but they can not find the rectangle of the text in an element. </blockquote> 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?
Pomohlo vám to?
Citácia

Autor otázky

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
Pomohlo vám to?
Citácia
Položiť otázku

Ak chcete pridať odpoveď, musíte sa prihlásiť k svojmu účtu. Ak účet doteraz nemáte, položte novú otázku.