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

如果HTML元素溢出了内容，我可以使用JavaScript来检查（不考虑滚动条）吗？ 例如，具有小的固定大小的长div，将溢出属性设置为可见，并且元素上没有滚动条。

Answer 1

通常情况下，您可以将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。

Answer 2

尝试将element.scrollHeight / element.scrollWidth与element.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

Answer 3

我不认为这个答案是完美的。 有时scrollWidth / clientWidth / offsetWidth是相同的，即使文本溢出。

这在Chrome中运行良好，但不在IE和Firefox中。

最后，我试了这个答案： HTML文本溢出省略号检测

这是完美的，在任何地方运作良好。 所以我选择这个，也许你可以试试，你不会失望的。

Answer 4

这是一个JavaScript解决方案（与Mootools），将减少字体大小，以适应elHeader的界限。

 while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) { var f = parseInt(elHeader.getStyle('font-size'), 10); f--; elHeader.setStyle('font-size', f + 'px'); } 

elHeader的CSS：

  width:100%; font-size:40px; line-height:36px; font-family:Arial; text-align:center; max-height:36px; overflow:hidden; 

注意elHeader的包装器设置了elHeader的宽度。