HTML 요소의 컨텐츠가 오버 플로우되는지 판별

HTML 요소가 내용을 오버플로했는지 JavaScript를 사용하여 스크롤 막대와 상관없이 확인할 수 있습니까? 예를 들어, 고정 크기가 작고 overflow 속성이 visible로 설정되고 요소에 스크롤 막대가없는 긴 div가 있습니다.

일반적으로, 당신은 비교할 수 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()필요한 경우.

이것은 자바 스크립트 솔루션 (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의 너비를 설정합니다.