Javascript 如何检测div元素中的溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7138772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect overflow in div element?
提问by Vladimir Perkovi?
How can I detect vertical text overflow in a div element?
如何检测 div 元素中的垂直文本溢出？
CSS:
CSS：
div.rounded {
background-color:#FFF;
height: 123px;
width:200px;
font-size:11px;
overflow:hidden;
}
HTML:
HTML：
<div id="tempDiv" class="rounded">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet.
</div>
回答by BlackDivine
You can easily do that by comparing scrollHeight with clientHeight, try the following:
您可以通过将 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>
For more information please take a look at: http://help.dottoro.com/ljbixkkn.php
更多信息请查看：http: //help.dottoro.com/ljbixkkn.php
回答by Josh Russo
A variation on Chamika's answer is to, in your actual html, have an inner and outer Div. The outer Div would have static height and width and overflow hidden. The inner Div only has the content and will stretch to the content.
Chamika 的答案的一个变化是，在你的实际 html 中，有一个内部和外部 Div。外部 Div 将具有静态高度和宽度并隐藏溢出。内部 Div 只有内容并且会拉伸到内容。
You can then compare the height and width of the 2 Divs, without the need to dynamically add anything.
然后就可以比较 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>
回答by Chamika Sandamal
following jQuery plugin will alert the result.
以下 jQuery 插件会提醒结果。
CSS
CSS
#tempDiv{
height:10px;
overflow:hidden;
}?
To determine overflow in the width,
要确定宽度溢出，
(function($) {
$.fn.isOverflowWidth = function() {
return this.each(function() {
var el = $(this);
if (el.css("overflow") == "hidden") {
var text = el.html();
var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').width('auto').height(el.height());
el.after(t);
function width() {
return t.width() > el.width();
};
alert(width());
}
});
};
})(jQuery);
To determine overflow in the height,
要确定高度溢出，
(function($) {
$.fn.isOverflowHeight = function() {
return this.each(function() {
var el = $(this);
if (el.css("overflow") == "hidden") {
var text = el.html();
var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').height('auto').width(el.width());
el.after(t);
function height() {
return t.height() > el.height();
};
alert(height());
}
});
};
})(jQuery);
