Índice

Desbordamiento del contenido

La propiedad overflow determina lo que debe hacer el navegador cuando un elemento es más grande que el elemento padre que lo contiene.

overflow:

hidden;

o bien scroll;

o bien visible;

o bien auto;

Comentarios

  • Con el valor hidden, la parte que desborda se oculta, sin posibilidad de verla ni acceder a ella.

  • Con el valor scroll, la parte que desborda se oculta, aunque queda accesible mediante barras de desplazamiento.

  • Con el valor visible, la parte que desborda se muestra, ignorando las especificaciones del elemento padre que lo contiene.

  • Con el valor auto, se deja la gestión al navegador.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8"> 
<style type="text/css"> 
.caja { width: 280px; height: 60px; 
        border: 1px solid black; 
        overflow: auto;} 
</style> 
</head> 
<body> 
<div class="caja"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 
nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> 
</body> 
</html>
images/CAP19IMG07.png