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

Question

我有一个固定宽度和固定高度的父 div。

内容可能会超过这个，所以我想知道Javascript中有没有办法计算内容是否超过固定尺寸？

一个例子是这样的：

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

 A sentence that exceeds the width!

</div>

在上述情况下，它确实超过了宽度。这将如何在 Javascript 中实现？

Answer 1

为您的内容创建父级：

<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;

Answer 2

您可以使用div 和 text 节点的DOM 属性。如果您可以将文本包装在<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/