X
Нажмите здесь, чтобы перейти на мобильную версию сайта.

Форум поддержки

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?

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?
Приложенные скриншоты
Цитата

Дополнительные сведения о системе

Приложение

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

Дополнительная информация

cor-el
  • Top 10 Contributor
  • Moderator
17476 решений 157949 ответов
Размещено

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>
Помогла ли вам это?
Цитата
jscher2000
  • Top 10 Contributor
8695 решений 71066 ответов
Размещено

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?
Помогла ли вам это?
Цитата

Задавший вопрос

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
Помогла ли вам это?
Цитата
Задать вопрос

Для ответа на сообщения вы должны войти в свою учётную запись. Пожалуйста, задайте новый вопрос, если у вас ещё нет учётной записи.