检查innerHTML是否超过父级的宽度或高度

Question

I have a parent div with a fixed width and a fixed height.

The contents how ever might exceed this, so I am wondering is there a way in Javascript to calculate if the content exceeds the fixed dimensions?

An example would be like this:

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

 A sentence that exceeds the width!

</div>

In the above case it does exceed the width. How would this be achieved in Javascript?

Answer 1

make a parent for your content:

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

</div>
</div>

now you can get width and height of the parent and compare it with your main div:

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

Answer 2

You can use DOM properties of the div and text nodes. If you can wrap the text in a <span> element, it seems like it will be easier to work with the dimension properties.

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/