如何检测div元素中的溢出？

Question

如何检测div元素中的垂直文本溢出？

CSS:

div.rounded {
   background-color:#FFF;
   height: 123px;
   width:200px;
   font-size:11px;
   overflow:hidden;
}

HTML:

<div id="tempDiv" class="rounded">
    Lorem ipsum dolor sit amet,
    consectetur     adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
</div>

Answer 1

您可以通过将scrollHeight与clientHeight进行比较来轻松完成此操作,请尝试以下操作:

<script type="text/javascript">
function GetContainerSize ()
{
    var container = document.getElementById ("tempDiv");
    var message = "The width of the contents with padding: " + container.scrollWidth + "px.\n";
    message += "The height of the contents with padding: " + container.scrollHeight + "px.\n";

    alert (message);
}
</script>

有关更多信息,请查看:http://help.dottoro.com/ljbixkkn.php

Answer 2

Chamika答案的一种变化是，在您的实际html中，具有内部和外部Div。外部Div将具有静态的高度和宽度，并隐藏溢出。内部的Div仅具有内容，并将扩展到该内容。

然后，您可以比较2个Div的高度和宽度，而无需动态添加任何内容。

<div id="tempDiv" class="rounded">
    <div class="content">
        Lorem ipsum dolor sit amet,
        consectetur     adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
    </div>
</div>