En diseño web puede suceder que el contenido de un elemento HTML sea mayor que las dimensiones de la caja. Esto se produce cuando se ha definido un tamaño que no permite suficiente espacio para acomodar el contenido. En caso contrario, el navegador habría calculado el tamaño de forma automática.
Ejemplo de desbordamiento:
.desborda {
border: 1px dotted #ff7f2a;
padding: 5px;
height: 45px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Tal y como se puede observar en este ejemplo, el texto sale por debajo debido a la altura de al caja, que está definida en 45 píxeles.
Si no hubiéramos definido esta altura fija de 45 píxeles, el navegador web habría calculado el alto del elemento de forma automática.
Código CSS modificado:
.nodesborda {
border: 1px dotted #ff7f2a;
padding: 5px;
}
Y este sería el resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
¿Lo ves? Por defecto, el contenido no sobresale por el exterior del borde.
Sin embargo, si queremos que la caja del elemento HTML en cuestión tenga una altura fija y, al mismo tiempo, evitar que el contenido desborde, podremos hacerlo con una serie de propiedades específicas de CSS.
Propiedades de desbordamiento:
| Propiedad | Descripción |
|---|---|
overflow | Define el desbordamiento del contenido. |
overflow-x | Define el desbordamiento en el eje horizontal. |
overflow-y | Define el desbordamiento en el eje vertical |
overflow-wrap | Rompe palabras si desbordan. |
Desbordamiento de contenido
Para tratar el desbordamiento, CSS publicó en el nivel 2 la propiedad overflow. Gracias a esta propiedad se puede indicar si se desea recortar el contenido que sobresalga o si se quiere mostrar barras de desplazamiento para mostrar el contenido deslizándose en el eje horizontal o vertical.
Además, se puede modificar el desbordamiento de forma independiente en el eje horizontal con la propiedad overflow-x (la «x» indica el eje de las abscisas). Para modificar el desbordamiento en el eje vertical se usa la propiedad overflow-y (la «y» indica el eje de las ordenadas).
Valores para controlar el desbordamiento:
| Valor | Descripción |
|---|---|
visible | Valor por defecto. El contenido que sobresale será visible. Se permite el desbordamiento. |
hidden | Se oculta el contenido que sobresale, por lo que no hay desbordamiento (se esconde). |
scroll | Aparecen las dos barras de desplazamiento (horizontal y vertical) para poder ver el contenido que sobresale. |
auto | Aparecen las barras de desplazamiento si es necesario: sólo la horizontal, sólo la vertical, las dos o ninguna. |
Si el valor es visible, siempre se desbordará. En cambio, si el valor es hidden, el contenido que sobresale quedará escondido, como si se tratara de una ventana y mirásemos a través de ella: una parte del exterior queda escondida.
.esconde {
border: 1px dotted #ff7f2a;
padding: 5px;
overflow: hidden;
height: 45px;
}
Tal y como se puede ver en este ejemplo, parte del contenido que habría desbordado queda oculto a partir de los 45 píxeles de altura:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Por tanto, vamos a colocar una barra de desplazamiento vertical:
.vertical {
border: 1px dotted #ff7f2a;
padding: 5px;
overflow-y: scroll;
height: 45px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Con la propiedad overflow-y y el valor scroll forzamos la barra de desplazamiento vertical. Con overflow: auto obtendríamos el mismo resultado: el navegador vería que el contenido es mayor que el tamaño indicado, por lo que insertaría la misma barra de desplazamiento.
Ahora vamos a colocar la barra de desplazamiento horizontal:
.horizontal {
border: 1px dotted #ff7f2a;
padding: 5px;
overflow-x: scroll;
height: 45px;
width: 100%;
white-space: pre;
}
Resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Para poder visualizar el resultado se especifica un ancho del 100%, ajustando el texto a la totalidad del elemento padre, que en este caso es <blockquote>. También se añade la propiedad white-space: pre para que el texto no fluya hacia abajo sino hacia la derecha.
Desbordamiento de texto
El desbordamiento de texto puede llegar a ser algo más complejo. Por ejemplo, puede darse el caso de que tengamos palabras muy largas que sobresalen hacia el exterior de la caja del elemento HTML. Podemos usar la propiedad overflow-wrap para solucionar este problema rompiendo palabras largas.
Veamos un ejemplo. Creamos una caja con una anchura máxima de 100 píxeles e introducimos el valor del número Pi con 16 decimales. Al no tener espacios, por defecto el navegador los mantendrá unidos. No especificamos una altura para provocar que el navegador la ajuste automáticamente.
.texto {
border: 1px dotted #ff7f2a;
display: inline-block;
padding: 5px;
overflow-wrap: normal;
max-width: 100px;
}
El resultado es que el texto sobresale por la derecha.
El valor de Pi es 3,1415926535897932.
Para solucionar esto, la propiedad overflow-wrap permite dos valores: uno para romper palabras que desbordan y otro para romper la línea en cualquier lugar:
| Valor | Descripción |
|---|---|
normal | Las palabras largas no se rompen. |
break-word | Rompe las palabras que desbordan. |
anywhere | Rompe la línea en cualquier lugar. |
Tanto si usamos break-word como si usamos anywhere, como resultado veremos los decimales de Pi partidos, continuando en la línea siguiente.
El valor de Pi es 3,1415926535897932.
Si lo que se quiere es indicar al usuario que debido al desbordamiento del texto, este se queda escondido dentro de los límites de la zona del contenido, se debe usar la propiedad de texto text-overflow. Esta propiedad solo funcionará si se usa overflow: hidden y white-space: nowrap.
