Determinar si el contenido de un elemento HTML se desborda

136

¿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 un tamaño pequeño y fijo, la propiedad de desbordamiento establecida en visible y sin barras de desplazamiento en el elemento.

javascript html css

— Barett
fuente

217

Normalmente, puede comparar client[Height|Width]con scroll[Height|Width]para detectar esto ... pero los valores serán los mismos cuando el desbordamiento sea visible. Entonces, una rutina de detección debe explicar 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.

— Shog9
fuente

gracias Shog9 ... la rutina de detección es, creo, lo que necesitaba, porque juego con rebosadero (oculto / visible)

Tengo una pregunta similar en stackoverflow.com/questions/2023787/... donde estoy tratando de averiguar qué partes del elemento contenedor tienen un desbordamiento oculto.

— slolife

2

Me pregunto si esto dará un breve parpadeo ya que el estilo cambia brevemente.

— Stijn de Witt

3

+1. Esto funciona en los navegadores modernos (incluidos al menos Chrome 40 y otros navegadores de la versión actual desde el momento de este escrito).

— L0j1k

1

No funciona en MS Edge. A veces el contenido no está desbordando pero clientWidthy scrollWidthse diferencia por 1 píxel.

— jesper

11

Intenta comparar element.scrollHeight/ element.scrollWidtha 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

— Chris MacDonald
fuente

2

No creo que esta respuesta sea perfecta. A veces, scrollWidth / clientWidth / offsetWidth son los mismos aunque el texto se desborde.

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

Por fin, probé esta respuesta: detección de puntos suspensivos de desbordamiento de texto HTML

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

— zjalex
fuente

Sugiero eliminar o anular esta respuesta, ya que tiene algún defecto. Lo uso al principio, pero no puede funcionar perfectamente con un estilo CSS especial.

— zjalex

1

Otra forma es comparar el ancho del elemento con el ancho de su padre:

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

— Alisson Nunes
fuente

0

Con jQuery podrías hacer:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Cambiar a .prop('scrollWidth')y .width()si es necesario.

— Agu Dondo
fuente

-2

Esta es una solución de JavaScript (con Mootools) que reducirá el tamaño de fuente para adaptarse 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;

Tenga en cuenta que el contenedor de elHeader establece el ancho de elHeader.

— usuario945389
fuente