Overflow
Usa estas utilidades abreviadas para configurar rápidamente cómo el contenido desborda un elemento.
Overflow
Ajusta la propiedad overflow
sobre la marcha con cuatro valores y clases predeterminados. Estas clases no son responsive de forma predeterminada.
HTML
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
overflow-x
Ajusta la propiedad overflow-x
para afectar el desbordamiento del contenido horizontalmente.
HTML
<div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>
overflow-y
Ajusta la propiedad overflow-y
para afectar el desbordamiento del contenido verticalmente.
HTML
<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>
Usando variables Sass, puedes personalizar las utilidades de desbordamiento cambiando la variable $overflows
en _variables.scss
.
CSS
API de utilidades de Sass
Las utilidades de desbordamiento se declaran en nuestra API de utilidades en scss/_utilities.scss
. Aprende a utilizar la API de utilidades.
scss/_utilities.scss (opens in a new tab)
scss/_utilities.scss
"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),