👨💻 La Propiedad overflow
La Propiedad de desbordamiento de CSS conocida como overflow permite regular la visiblidad de los contenidos que sobresalen de una caja html.
Permite especificar si: los contenidos que sobresalen se seguirán viendo,
si se ocultarán,
si aparecerá una barra de scroll en el documento.
si recortar contenido,
mostrar el contenido excedente en un elemento a nivel de bloque o,
agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área especificada.
Usando la propiedad overflow con un valor distinto a visible, valor por defecto, creará un nuevo contexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.
Sintáxis formal:
[ visible | hidden | clip | scroll | auto ] {1,2}
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: inherit
Valores
visible
Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
hidden
El contenido es recortado y no se muestran barras de posición.
scroll
El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.
auto
Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.
Extensiones de Mozilla
-moz-scrollbars-none
Usar overflow:hidden.
-moz-scrollbars-horizontal
Es preferible el uso de overflow-x y overflow-y.
-moz-scrollbars-vertical
Es preferible el uso de overflow-x y overflow-y.
-moz-hidden-unscrollable
Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y ,
usando las flechas del teclado o la rueda del ratón.
Si no se establece la propiedad width sobre un elemento, su tamaño se calcula automáticamente en función de si es un elemento de bloque o en línea, en función del tamaño del elemento contenedor en el que se encuentra y en función de algunos otros parámetros.
| Definición | Controla el comportamiento de los contenidos que no caben en su elemento contenedor |
|---|
Valores
permitidos | Uno y sólo uno de los siguientes valores: visible hidden scroll auto inherit
|
|---|
| Valor inicial | visible |
|---|
| Se aplica a | Elementos de bloque, celdas de tabla y elementos de tipo inline-block |
|---|
| Válida en | medios visuales |
|---|
| Se hereda | no |
|---|
Definición en
el estándar | w3.org/TR/CSS21/visufx.html#propdef-overflow |
|---|
En las siguientes 3 imágenes se muestra un ejemplo de cada.
El código usado es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Francesc Ricart">
<title>Document</title>
<style>
div{
width:150px;
height:100px;
border:1px solid red;
padding:1%;
}
div{
overflow:visible;
/*
overflow:hidden;
overflow:scroll;
*/
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates debitis iste possimus doloribus doloremque earum dolor dolore fuga, eligendi itaque recusandae hic aperiam, cumque expedita, odio laborum. Tenetur, necessitatibus modi!
</div>
</body>
</html>
Acá una imagen con los resultados:
visible; hace que el texto sobresalga por encima del div.
hidden; hace que el texto que sobresalga por encima del div no sea visible.
scroll; crea una barra deslizante lateral
overflow: visible.
p {
width: 12em;
border: dotted;
overflow: visible;
}
visible (por defecto)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
overflow: hidden.
p { overflow: hidden; /* no se dibujan barras */ }
overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
overflow: scroll.
p { overflow: scroll; /* se dibujan ambas barras */ }
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
overflow: auto.
p { overflow: auto; /* se dibujan barras según se necesite */ }
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Otros ejemplos de prácticas
Si no se establece la propiedad width sobre un elemento, su tamaño se calcula automáticamente en función de si es un elemento de bloque o en línea, en función del tamaño del elemento contenedor en el que se encuentra y en función de algunos otros parámetros.
De la misma forma, si no se establece la propiedad heightsobre un elemento, su valor por defecto es auto, lo que significa que el navegador muestra ese elemento con la altura necesaria para que sus contenidos se vean completamente.
En el diseño de páginas web es habitual establecer la anchura de los elementos mediante la propiedad width para crear las columnas de contenidos. Sin embargo, el uso de la propiedad height es mucho más limitado, ya que se suele dejar que el navegador calcule automáticamente la altura necesaria para cada elemento.
El siguiente ejemplo muestra cómo el navegador establece automáticamente diferentes alturas para un mismo elemento en función de su anchura:
width: 90%; height: auto 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.
width: 50%; height: auto 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.
El principal motivo por el que no suele establecerse la altura de los elementos es que normalmente no se conoce su contenido exacto. Si por ejemplo se utiliza un elemento <div> para mostrar la descripción de un producto o el texto de una noticia, no es posible fijar la altura correcta de ese <div>, ya que variará para cada producto o noticia.
Cuando se establece una altura más pequeña que la necesaria para mostrar los contenidos de un elemento, el resultado es el que muestra el siguiente ejemplo:
width: 50%; height: 50px 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.
El estándar de CSS 2.1 indica que cuando los contenidos de un elemento no caben en su interior, el navegador debe mostrarlos aunque se salgan del elemento y se solapen con los elementos adyacentes. Afortunadamente, la propiedad overflow permite modificar este comportamiento por defecto.
Bibliografía consultada:
https://uniwebsidad.com/libros/referencia-css2/overflow
https://francescricart.com/la-propiedad-overflow/#:~:text=La%20propiedad%20overflow%20permite%20regular%20la%20visiblidad%20de,el%20documento.%20Los%20valores%20que%20puede%20tomar%20son%3A
https://developer.mozilla.org/es/docs/Web/CSS/overflow
