
La propiedad overflow-x en CSS especifica si se recorta el contenido, se muestra una barra de desplazamiento o se muestra más contenido del elemento de bloque a la derecha o a la izquierda.
Funciones overflow-x css
Valor inicial | visible |
---|---|
Aplicado a | Elementos block-level y inline-block no reemplazados. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/* el contenido no se recortará */ overflow-x : visible ; /* El contenido se recortará sin mostrar una barra de desplazamiento */ overflow-x : hidden ; /* El contenido se recortará con una barra de desplazamiento */ overflow-x : scroll ; /* Déjelo en manos del navegador */ overflow-x : auto ; /* valores globales */ overflow-x: inherit; overflow-x: initial; overflow-x: unset;
Ejemplos y aplicaciones en código
A continuación una demostración sencilla de este caso.
Código HTML:
<ul> <li><code>overflow-x:hidden</code> <div id="div1"> ABCDEFGHIJKLMNÑOPQRSTUVWXYZ </div> </li> <li><code>overflow-x:scroll</code> <div id="div2"> 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27 </div> </li> <li><code>overflow-x:visible</code> <div id="div3"> ABCDEFGHIJKLMNÑOPQRSTUVWXYZ </div> </li> <li><code>overflow-x:auto</code> <div id="div4"> 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27 </div> </li> </ul>
Código CSS:
#div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;}
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 3,5 | 5,0 | 9.5 | 3,0 |
Características generales
Esta propiedad acepta solo una de las palabras reservadas que se enumeran a continuación.
visible
El contenido no se recortará, pero se puede mostrar fuera del cuadro de contenido del elemento.
hidden
El contenido se recortará y el navegador no mostrará una barra de desplazamiento.
scroll
El contenido se recortará y los navegadores mostrarán barras de desplazamiento tanto si el contenido se ha recortado como si no, esto evita el problema de que la barra de desplazamiento aparezca y desaparezca en las páginas dinámicas. Tenga en cuenta que las impresoras pueden imprimir contenido más allá del cuadro de contenido.
auto
Deje la elección al software que procesa el documento, por ejemplo, los navegadores de computadora mostrará una barra de desplazamiento si el contenido excede el cuadro de contenido.
Estructura overflow-x css
overflow-x: visible | hidden | scroll | auto;
Consulte también
- La propiedad
overflow
de la página y la página subpropiedades que este conjunto de propiedades son:overflow-y
. - Página de propiedades
position
que describe cómo se debe colocar el elemento en el documento. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS