Inicio > Estilos CSS > Qué es Overflow en CSS?

Qué es Overflow en CSS?

Editar CSSMuchos de nosotros son los que nos preguntamos, para que sirve el overflow en los codigos HTML, o en los CSS, que es lo que hace que las páginas queden de forma correcta. La respuesta es bien sencilla….

Overflow se utiliza para indicar al navegador de nuestro ordenador lo que debe hacer con el contenido que no cabe dentro de una capa (div) que segun las dimensiones que le hayamos dado este no quema en el mismo.

A los Div’s o capas se les puede dar mediante el height o el width una altura o anchura mediante pixeles por lo general. Muchas veces en esa capa colocamos contenido que excede al espacio que le hemos dado a la capa por lo que el navegador no sabe que hacer con ese contenido sobrante. Para ello utilizaremos la propiedad Overflow en nuestro CSS para indicar a los navegadores que hacer con ese contenido sobrante cuando nos exceda en tamaño. Por lo general el navegador cuando detecta que se excede el contenido al espacio destinado apra ello, hará crecer la capa en altura, pero esto lo podemos modificar con las siguientes propiedades del Overflow:

  • visible: Si le indicamos que sea visible, le indicamos que el contendo se ha de visualizar de una forma u otra por completo. El resultado de esta propiedad es diferente según el navegador. Si hablamos del Internet Explorer, la capa crece en cuestion de altura. Por lo que todos los elementos que tenga debajo se desplazarán. En cambio en el Firefox el contenido de la capa crecerá en altura tambien, pero posicionandose por encima de los elementos que tenga debajo. En todos los casos el contenido no se oculta ni recorta sino que se queda visible.

Overflow VisibleEfecto en Internet Explorer.

Overflow visibleEfecto en Firefox.


  • hidden: Con esta propiedad indicamos que todo aquel contenido que no quepa dentro de la capa por que exceda en los limites de altura y anchura configurados en nuestro CSS, se ocultará quedanto el contenido visible el máximo que quepa en la capa y así no modificará el tamaño de la capa manteniendola.

Overflow Hidden

  • scroll: Si le indicamos la propiedad Scroll le estaremos indicando que el contenido sobrante dentro de la capa quedará oculto, es decir que la capa mantendrá su tamaño prefijado pero que a su vez podemos ver la parte excediente ya que le indicamos que nos añada las Barras de Desplazamiento (scroll) para que podamos movernos por el contenido sin que este se pierda por haber quedado oculto, que nos modifique la capa y nos mueva los elementos de nuestra página o que se situe por encima de otros elementos. Uno de los inconvenientes de esta propiedad es que las Barras de Desplazamiento apareceran siempre, aunque en la capa no haya contenido. También podemos forzar el scroll hacia uno de los lados, por altura o anchura overflow-y:scroll;” “overflow-x:scroll;”.

Overflow Scroll

  • auto: Con esta propiedad permitimos que el mismo gestione la capa. En todos los casos de auto, la capa mantendrá su tamaño y el contenido será recortado, por lo contrario si este excede no se perderá ya que aparecerá automaticamente las Barras de Desplazamiento, solamente cuando sea necesario.

Overflow Auto

Ilustraciones de CSS TRIKS

Ejemplo de CSS TRIKS

  1. Juan
    19 enero 2011 a las 21:17

    Me sirvió muchísimo Gracias!

  2. SJENERT
    26 julio 2010 a las 20:59

    Me sirvio esta explicación, no sabia ni que era ni que hacia pero ahora ya lo tengo, gracias.

  3. 4 mayo 2010 a las 17:32

    Si creo entenderte quieres que un texto que sea mas largo de la cuenta se recorte con puntos suspensivos como su fuera un leer mas.

    La idea es buena pero yo creo que no, funciones php si que hacen esto te acortan el texto en el número de letras que tu le digas (substring por ejemplo) añadiendole puntos suspensivos. Esto va bien cuando es un link, y enlazas a otra pagina con todo el texto. Por CSS creo que no existe ya seria programando con php, javascript por ejemplo que leyera el contenido y lo recortara.

  4. albert
    3 mayo 2010 a las 14:33

    hola!
    me ha servido de mucha ayuda, no conseguia entenderlo…

    una pregunta:
    ¿es posible crear una especie de hidden pero que añada puntos suspensivos al final?
    tengo los titulares de unas noticias en hidden y funciona perfecto, pero aora resulta que no se ve claro si el titular continua o es así, entonces agradecería si alguien puede darme pistas para que aparezcan puntos suspensivos al final de cada titular “escondido” (solo en los escondidos).
    muchas gracias por todo!

    • Emilio Murado
      3 febrero 2012 a las 12:41

      Llego obviamente tarde, pero lo explico por si le sirve a alguien. Sí que se pueden mostrar puntos suspensivos cuando el texto sea demasiado largo. Para ello tendrías que aplicarle los siguientes estilos al contenedor donde está el texto. Por ejemplo:

      .clase-contenedor {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      }

      La propiedad text-overflow: ellipsis hace exactamente lo que tú quieres, poner puntos suspensivos automáticamente cuando el texto sea más largo de la cuenta.

      ¡Un saludo!

  1. 14 octubre 2016 a las 20:04
  2. 22 agosto 2016 a las 20:31
  3. 22 agosto 2016 a las 16:32
  4. 22 agosto 2016 a las 03:01
  5. 21 octubre 2014 a las 05:40
  6. 25 marzo 2010 a las 17:39

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: