overflow-x
La propietat overflow-x
especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores esquerra i dreta.
/* El contingut no es retallat */
overflow-x: visible;
/* El contingut es retallat, sense barres desplaçament */
overflow-x: hidden;
/* El contingut es retallat, amb barres desplaçament */
overflow-x: scroll;
/* Deixa que el navegador decideixi */
overflow-x: auto;
/* Valors globals */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;
Initial value | visible |
---|---|
Applies to | Block-containers, flex containers, and grid containers |
Inherited | no |
Computed value | com s'especifica, excepte que si overflow-x o bé overflow-y són diferents de visible o clip , aquests dos valors computen a auto o hidden respectivament |
Animation type | discrete |
Sintaxi
Valors
visible
- El contingut no es retalla i es pot mostrar fora de la caixa de contingut.
hidden
- El contingut es retalla i no es proporcionen barres de desplaçament.
scroll
- El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.
auto
- Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
Sintaxi formal
Exemples
HTML
<ul>
<li><code>overflow-x:hidden</code> — amaga el text fora de la caixa
<div id="div1">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:scroll</code> — afegeix sempre una barra de desplaçament
<div id="div2">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:visible</code> — mostra el text fora de la caixa, si és necessari
<div id="div3">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:auto</code> — a la majoria de navegadors, equivalent a <code>scroll</code>
<div id="div4">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
</ul>
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;}
Resultat
Especificacions
Especificació | Estat | Comentari |
---|---|---|
CSS Overflow Module Level 3 The definition of 'overflow-x' in that specification. |
Working Draft | |
CSS Basic Box Model The definition of 'overflow-x' in that specification. |
Candidate Recommendation | Definició inicial. |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 3.5 (1.9.1) | 5.0[1] | 9.5 | 3.0 |
Descripció | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | (Yes) | 1.0 (1.9.1) | (Yes) | (Yes) | (Yes) |
[1] Internet Explorer 8 va introduir -ms-overflow-x
com sinònim de overflow-x
. No utilitzeu el prefix -ms-
.
Vegeu també
- Propietats CSS relacionades:
text-overflow
,white-space
,overflow
,overflow-y
,clip
,display