clientWidth "лежа", невозможно определить фактическую ширину элемента

Question

<div style="width: 50px;">
  <div id="theElement" style="position: relative; left 25px;">textMuchLongerThan50[</div>
</div>

document.getElementById ("theElement"). ClientWidth всегда возвращает 50, что является шириной родительского элемента, хотя очевидно, что содержимое элемента намного шире

(Сам элемент действительно имеет эту ширину, но мне нужно знать его «естественную» ширину, то есть ширину его содержимого.)

Испытываете такое поведение в Chrome и IE. Если Анойн знал, как определить фактические размеры относительно позиционированного DIV, находящегося в другом DIV с предварительно установленной / ограниченной шириной ...?

Answer 1

Вы заинтересованы в scrollWidth : Пример

Answer 2

Это потому, что это блочный элемент, и он на самом деле берет свою ширину от своего родителя. Текст внутри него переполняется за пределами контейнера, но не влияет на фактическую ширину контейнера.

Вы можете доказать это, добавив стиль border к внутреннему <div>.

Вы можете заставить элемент брать ширину из ширины текста, изменив тип отображения.

Если вы установите display:inline-block;, он сообщит правильную ширину.

И если вы добавите border сейчас, вы заметите, что он тоже изменился.