Проверка, превышает ли innerHTML ширину или высоту родителя

Question

Проверка, превышает ли innerHTML ширину или высоту родителя

0

У меня есть родительский div с фиксированной шириной и фиксированной высотой.

Содержимое, как бы это ни было, может превысить это, поэтому мне интересно, есть ли способ в Javascript рассчитать, превышает ли контент фиксированные размеры?

Пример будет таким:

<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">

 A sentence that exceeds the width!

</div>

В приведенном выше случае он превышает ширину. Как это будет достигнуто в Javascript?

Sir 12 нояб. 2013, в 00:15

Источник

0

Вам нужно будет обернуть содержимое в другой элемент, чтобы JavaScript мог нацеливать / получать доступ к этому узлу и определять его ширину / высоту по сравнению с родительским.
David Thomas 11 нояб. 2013, в 23:18

Теги:

javascript

html

css

2 ответа

0

Вы можете использовать свойства DOM для div и текстовых узлов. Если вы можете обернуть текст в элементе <span>, похоже, будет легче работать с свойствами измерения.

HTML

<div id="container">
  <span>A sentence that exceeds the width!</span>
</div>

CSS

div {
    width:50px;
    overflow:hidden;
    white-space: nowrap;
}

JS

var cont = document.getElementById('container');
var spn = cont.getElementsByTagName('span')[0];
//alert(cont.clientWidth);
//alert(spn.offsetWidth);

if(spn.offsetWidth > cont.clientWidth) {
    alert("content exceeds width of parent div");
}

http://jsfiddle.net/Bn2Uc/2/

Nick Rolando 11 нояб. 2013, в 21:07

Ещё вопросы

Вам нужно будет обернуть содержимое в другой элемент, чтобы JavaScript мог нацеливать / получать доступ к этому узлу и определять его ширину / высоту по сравнению с родительским.

Ashkan Mobayen Khiabani · Accepted Answer · 2013-11-11T21-21-00.000Z

создайте родителя для вашего контента:

<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
 <div id="parent">
 A sentence that exceeds the width!

</div>
</div>

теперь вы можете получить ширину и высоту родителя и сравнить его с вашим основным div:

var h = document.getElementById("parent").offsetHeight;
var w = document.getElementById("parent").offsetWidth;