Determinar si el contenido de un elemento HTML se desborda

Question

¿Puedo usar JavaScript para verificar (independientemente de las barras de desplazamiento) si un elemento HTML ha desbordado su contenido? Por ejemplo, un div largo con tamaño pequeño y fijo, la propiedad de desbordamiento configurada como visible y sin barras de desplazamiento en el elemento.

Answer 1

Normalmente, se puede comparar la client[Height|Width] con el fin scroll[Height|Width] para detectar esto ... pero los valores serán los mismos cuando el desbordamiento sea visible. Por lo tanto, una rutina de detección debe dar cuenta de esto:

// 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; 
} 

Probado en FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Answer 2

intente comparar element.scrollHeight/element.scrollWidth a 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

Answer 3

No creo que esta respuesta sea perfecta. En ocasiones, scrollWidth/clientWidth/offsetWidth es el mismo aunque el texto esté desbordado.

Esto funciona bien en Chrome, pero no en IE y Firefox.

Por fin, he intentado esta respuesta: HTML text-overflow ellipsis detection

Es perfecto y funciona bien en cualquier lugar. Así que elijo esto, tal vez puedas intentarlo, no decepcionarás.

Answer 4

Esta es una solución de javascript (con Mootools) que reducirá el tamaño de fuente para ajustarse a los límites de 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'); 
} 

El CSS de elHeader:

width:100%; 
    font-size:40px; 
    line-height:36px; 
    font-family:Arial; 
    text-align:center; 
    max-height:36px; 
    overflow:hidden; 

Nota de la envoltura elHeader define la anchura de elHeader.