X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

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

Kuphostiwe

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?
Ama-screenshot ananyekiwe
Isicaphuno
cor-el
  • Top 10 Contributor
  • Moderator
17468 izisombululo 157853 izimpendulo
Kuphostiwe

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>
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8688 izisombululo 71024 izimpendulo
Kuphostiwe

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?
Ingabe lokhu kube usizo kuwena?
Isicaphuno

Umnikazi wombuzo

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
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.