HTML要素のコンテンツがオーバーフローしているかどうかを判別する

JavaScriptを使用して、HTML要素がコンテンツからオーバーフローしたかどうかを（スクロールバーに関係なく）チェックできますか？たとえば、小さい固定サイズの長いdiv、overflowプロパティが可視に設定され、要素にスクロールバーがありません。

通常、これを検出するために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でテスト済み。

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

この答えは完璧だとは思いません。テキストがオーバーフローしている場合でも、scrollWidth / clientWidth / offsetWidthが同じになることがあります。

これはChromeでは正常に機能しますが、IEとFirefoxでは機能しません。

ついに、私はこの答えを試しました： HTMLテキストオーバーフローの省略記号の検出

それは完璧でどこでもうまく機能します。だから私はこれを選びます、多分あなたは試すことができます、あなたは失望しません。

別の方法は、要素の幅をその親の幅と比較することです：

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

jQueryを使用すると、次のことができます。

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

に変更し.prop('scrollWidth')、.width()必要に応じて。

これは、フォントサイズを縮小してelHeaderの境界に合わせるJavaScriptソリューション（Mootoolsを使用）です。

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の幅を設定することに注意してください。