Div öğesinde taşma nasıl algılanır?

Bir div öğesinde dikey metin taşmasını nasıl algılayabilirim?Div öğesinde taşma nasıl algılanır?

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>

kaynak

2011-08-21 Vladimir Perković

Tam olarak "algılamak" ile ne demek istiyorsunuz? Reaksiyonda ne yapmak istersin, bir kaydırma çubuğu mu gösterirsin? –

Eğer metin taşarsa fareyi vurgulu hale getirerek yeniden boyutlandırmak istiyorum ancak bu sorunun bir parçası olmadı. –

Büyük bir cevapla benzer eski soru: https://stackoverflow.com/a/143889/573057 – earcam

Sen easil edebilirsiniz Daha fazla bilgi için

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

bir göz atın: http://help.dottoro.com/ljbixkkn.php

kaynak

2011-08-21 15:01:42 BlackDivine

Bu, divdaki taşma kuralı 'görünür' ise, bu varsayılan olarak çalışmaz. Firefox 18'i kullanma – Ryan

Bu, ne özel bir div'ın taştığını da söylemez. – NoBugs

Bu çözümle ilgili sorun, eğer öğe gizlenmişse (veya ebeveynse) her ikisi de 0 döndürür .. herhangi bir geçici çözüm? –

aşağıdaki jQuery eklentisi sonucu uyaracaktır.

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

yüksekliğinde taşma belirlemek için

CSS

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

genişliğinde taşma belirlemek için,

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

kaynak

2011-08-21 14:49:07

Bunun en etkili ya da en iyi yol olduğuna emin değilsiniz - o belirli bir div içinde betik varsa ne olur? – NoBugs

Chamika cevabı bir varyasyonu olan

için, gerçek html, bir iç var y clientHeight ile scrollHeight karşılaştırarak, aşağıdakileri deneyin emin ve dış Div. Dış Div, statik yükseklik ve genişliğe ve taşma gizli olacaktı. İç Div sadece içeriğe sahiptir ve içeriğe uzanacaktır.

Daha sonra, herhangi bir şeyi dinamik olarak eklemek gerekmeden 2 Div'in yükseklik ve genişliğini karşılaştırabilirsiniz.

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

kaynak

2013-11-15 19:42:22

Div öğesinde taşma nasıl algılanır?

cevap

İlgili konular