div 요소에서 오버플로를 감지하는 방법은 무엇입니까?

div 요소에서 세로 텍스트 오버플로를 감지하려면 어떻게해야합니까?div 요소에서 오버플로를 감지하는 방법은 무엇입니까?

CSS :

div.rounded { 
    background-color:#FFF; 
    height: 123px; 
    width:200px; 
    font-size:11px; 
    overflow:hidden; 
}

HTML :

<div id="tempDiv" class="rounded"> 
    Lorem ipsum dolor sit amet, 
    consectetur  adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
</div>

출처

2011-08-21 Vladimir Perković

정확하게 "감지"한다는 것은 무엇을 의미합니까? 반응에서 무엇을하고 싶습니까? 스크롤바를 보여 주시겠습니까? –

텍스트가 넘칠 경우 마우스를 가리키면 div 크기를 조정하려고하지만 이미 정렬 했으므로 질문의 일부가 아닙니다. –

위대한 답변과 비슷한 오래된 질문 : https://stackoverflow.com/a/143889/573057 – earcam

당신은 easil 수 자세한 내용은

<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>

가 살펴 보시기 바랍니다 : http://help.dottoro.com/ljbixkkn.php

출처

2011-08-21 15:01:42 BlackDivine

div의 오버플로 규칙이 기본값 인 'visible'인 경우에는 작동하지 않습니다. 파이어 폭스 사용하기 18. – Ryan

특정 div가 오버플로하는 것은 아닙니다. – NoBugs

이 솔루션의 문제점은 요소가 숨겨져 있거나 부모 인 경우 모두 0을 반환한다는 것입니다. –

다음 jQuery 플러그인은 결과를 알려줍니다.

(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);

이 높이에서 오버 플로우를 확인하려면

CSS

#tempDiv{ 
    height:10px; 
    overflow:hidden; 
}

가 폭의 오버 플로우를 확인하려면,

(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);

http://jsfiddle.net/C3hTV/

출처

2011-08-21 14:49:07

이것이 가장 효율적이거나 최선의 방법인지는 확실하지 않습니다. 특정 div 내에 스크립트가 있다면 다시 실행하게됩니다. it – NoBugs

Chamika의 대답에 변화가

을에, 실제 HTML로, 내부가 y를 clientHeight과 scrollHeight를 비교하여, 다음 시도 않는다 및 외부 Div. 바깥 쪽 Div는 정적 높이와 너비 및 오버 플로우가 숨겨집니다. 내부 Div는 콘텐츠 만 가지고 있으며 콘텐츠로 확장됩니다.

그런 다음 동적으로 아무것도 추가 할 필요없이 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>

출처

2013-11-15 19:42:22

div 요소에서 오버플로를 감지하는 방법은 무엇입니까?

답변

관련 문제