La mate por un Yogur.net

La mate por un Yogur.net

Overflow

7 de April, 2005

Overflow es la propiedad de css que especifica la visibilidad del contenido de un bloque. Gracias a ella podemos lograr que una capa oculte el texto que la desborda, muestre un scroll para navegar o permita el desbordamiento del texto.

Como aplicación práctica tenemos que aplicando el valor hidden, si el bloque contiene una url (sin espacios) demasiado larga, ésta no rompera nuestra capa y se ocultará la parte la cual desborda.

Valores posibles

  • auto: depende de la aplicación del usuario. Debe mostrar barra de desplazamiento.
  • hidden: oculta todo el texto que sobrepase el bloque.
  • scroll: muestra unas barras de desplazamiento si es necesario.
  • visible: el contenido no se recorta y se muestra aunque sobresalga el bloque.

Ejemplos

Overflow: auto

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in velit eu elit convallis rutrum. Vestibulum viverra fermentum ligula. Pellentesque ac risus sit amet erat consequat aliquet. Integer sapien justo, iaculis ac, euismod in, pretium vel, felis. Fusce pede odio, posuere vitae, rutrum non, feugiat id, odio. Vivamus neque. Nullam malesuada. Aliquam erat volutpat. Proin et urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Curabitur tristique felis sed tellus. Donec venenatis pede eget sapien. Vestibulum eget risus. Vestibulum mollis placerat erat.

Overflow: hidden

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in velit eu elit convallis rutrum. Vestibulum viverra fermentum ligula. Pellentesque ac risus sit amet erat consequat aliquet. Integer sapien justo, iaculis ac, euismod in, pretium vel, felis. Fusce pede odio, posuere vitae, rutrum non, feugiat id, odio. Vivamus neque. Nullam malesuada. Aliquam erat volutpat. Proin et urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Curabitur tristique felis sed tellus. Donec venenatis pede eget sapien. Vestibulum eget risus. Vestibulum mollis placerat erat.

Overflow: scroll

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in velit eu elit convallis rutrum. Vestibulum viverra fermentum ligula. Pellentesque ac risus sit amet erat consequat aliquet. Integer sapien justo, iaculis ac, euismod in, pretium vel, felis. Fusce pede odio, posuere vitae, rutrum non, feugiat id, odio. Vivamus neque. Nullam malesuada. Aliquam erat volutpat. Proin et urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Curabitur tristique felis sed tellus. Donec venenatis pede eget sapien. Vestibulum eget risus. Vestibulum mollis placerat erat.

Overflow: visible

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in velit eu elit convallis rutrum. Vestibulum viverra fermentum ligula. Pellentesque ac risus sit amet erat consequat aliquet. Integer sapien justo, iaculis ac, euismod in, pretium vel, felis. Fusce pede odio, posuere vitae, rutrum non, feugiat id, odio. Vivamus neque. Nullam malesuada. Aliquam erat volutpat. Proin et urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Curabitur tristique felis sed tellus. Donec venenatis pede eget sapien. Vestibulum eget risus. Vestibulum mollis placerat erat.

Más información

Entradas relacionadas

No hay comentarios

RSS TrackBack

Añade tu Comentario

Gracias a WordPress y Dreamhost
Bajo una licencia Creative Commons
Usa Firefox u Opera
Cerrar
Powered by ShareThis