X
Tocca qui per la versione per piattaforma mobile del sito.

Forum di supporto

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

Inserita

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?
Immagini allegate
Citazione
cor-el
  • Top 10 Contributor
  • Moderator
17467 soluzioni 157849 risposte

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>
È stato utile questo messaggio?
Citazione
jscher2000
  • Top 10 Contributor
8687 soluzioni 71011 risposte

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?
È stato utile questo messaggio?
Citazione

Utente che ha posto la domanda

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
È stato utile questo messaggio?
Citazione
Richiedi supporto

Bisogna accedere al proprio account per rispondere nelle discussioni. Se non si possiede ancora un account, inserire una nuova richiesta.