¿Cómo detectar el desbordamiento en el elemento div?

¿Cómo puedo detectar el desbordamiento de texto vertical en un elemento div?¿Cómo detectar el desbordamiento en el elemento 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>

Fuente

2011-08-21 Vladimir Perković

¿Qué quiere decir con "detectar" exactamente? ¿Qué quieres hacer en reacción, mostrar una barra de desplazamiento? –

Quiero cambiar el tamaño de div en el mouse si el texto se desborda pero ya lo resolví, por lo que no era parte de la pregunta. –

Pregunta antigua similar con gran respuesta: https://stackoverflow.com/a/143889/573057 – earcam

Puede easil Y lo hace mediante la comparación de scrollHeight con clientHeight, intente lo siguiente:

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

Para obtener más información, echar un vistazo a: http://help.dottoro.com/ljbixkkn.php

Fuente

2011-08-21 15:01:42 BlackDivine

Esto no funciona si la regla de desbordamiento en el div es 'visible', que es la predeterminada. Usando Firefox 18. – Ryan

No te dice qué div específico se está desbordando tampoco. – NoBugs

El problema con esta solución es que si el elemento está oculto (o es uno de sus padres) ambos devuelven 0 ... ¿alguna solución alternativa? –

siguiente plugin de jQuery alertará al resultado.

CSS

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

Para determinar desbordamiento en el ancho,

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

Para determinar desbordamiento en la altura,

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

Fuente

2011-08-21 14:49:07

No estoy seguro de que esta sea la manera más eficiente o mejor de comprobar: ¿y si hubiera una secuencia de comandos dentro de ese div en particular, se volvería a ejecutar? – NoBugs

Una variación en la respuesta de Chamika es, en su html real, tiene un interior y Div. exterior La div exterior tendría la altura y el ancho estáticos y el desbordamiento ocultos. La Div interna solo tiene el contenido y se extenderá al contenido.

Puede comparar la altura y el ancho de las 2 divisiones, sin la necesidad de agregar nada dinámicamente.

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

Fuente

2013-11-15 19:42:22

¿Cómo detectar el desbordamiento en el elemento div?

Respuesta

Cuestiones relacionadas