Блог

Главная - Вопросы по программированию - getBoundingClientRect() для элемента, переполняющего контейнер

getBoundingClientRect() для элемента, переполняющего контейнер

#javascript #getboundingclientrect

#javascript #getboundingclientrect

Вопрос:

Предположим, у нас есть текст, переполняющий его контейнер div:

 console.log(document.querySelector("p").getBoundingClientRect().width) 
 #myDiv {
  width: 20px;
  background-color: wheat;
  border: 1px solid #ddd;
} 
 <div id="myDiv">
  <p>foobarfoobarfoobarfoobarfoobar</p>
</div>

Как вы можете видеть, div контейнера имеет фиксированную ширину (20 пикселей), но даже если текст явно больше этого getBoundingClientRect() , он не превышает это значение контейнера.

Есть ли какая-либо альтернатива для получения ограничивающего прямоугольника текстового элемента в этой ситуации?

Комментарии:

1. Но это значение правильное. Если вы поставите другой <div>foo bar</div> после своего оригинала <div> , а затем установите div { display: inline-block; } , вы увидите, что оба <div> s будут перекрываться, потому что фактический прямоугольник занимает только ширину 20px , даже если за этой границей происходит дополнительный рендеринг. В любом случае, зачем вам это нужно?

2. @user4642212 «В любом случае, зачем вам это нужно?» Мне нужно вычислить длину текста на странице, которую HTML / CSS я не могу изменить.

Ответ №1:

Попробуйте настроить display: inline-block; p элемент так, чтобы он имел определенную ширину:

 console.log(document.querySelector("p").getBoundingClientRect().width) 
 #myDiv {
  width: 20px;
  background-color: wheat;
  border: 1px solid #ddd;
}

p {
   display: inline-block;
} 
 <div id="myDiv">
 <p>foobarfoobarfoobarfoobarfoobar</p>
</div>