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 properties。如果您可以将文本包装在<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/

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

2 个答案: