当前位置:  开发笔记 > 编程语言 > 正文

确定HTML元素的内容是否溢出

如何解决《确定HTML元素的内容是否溢出》经验,为你挑选了2个好方法。

如果HTML元素溢出其内容,我可以使用JavaScript检查(无论滚动条)吗?例如,一个长小的固定大小的div,溢出属性设置为可见,并且元素上没有滚动条.



1> Shog9..:

通常情况下,你可以比较client[Height|Width]使用scroll[Height|Width],以检测这种...但值是相同的,当溢出是可见的.因此,检测例程必须考虑到这一点:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

测试在FF3,FF40.0.2,IE6,Chrome 0.2.149.30中.


+1.这适用于现代浏览器(从撰写本文时起至少包括Chrome 40和其他当前版本的浏览器).
我想知道这样的风格是否会短暂闪烁?

2> Chris MacDon..:

尝试比较element.scrollHeight/ element.scrollWidthelement.offsetHeight/element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element. scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

推荐阅读
周扒pi
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有