This translation is incomplete. Please help translate this article from English.
La propietat CSS overflow
especifica si s'ha de retallar el contingut, mostrar barres de desplaçament o mostrar el contingut desbordat quan és massa gran per al seu contenidor a nivell de bloc.
/* El contingut no es retallat */ overflow: visible; /* El contingut es retallat, sense barres de desplaçament */ overflow: hidden; /* El contingut es retallat, amb barres de desplaçament */ overflow: scroll; /* Deixa que el navegador decideixi */ overflow: auto; /* Valors globals */ overflow: inherit; overflow: initial; overflow: unset;
<div class="grid"> <div class="row"> <div class="cell"> visible <p class="visible">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> </div> <div class="cell"> hidden <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> </div> <div class="cell"> scroll <p class="scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> </div> <div class="cell"> auto <p class="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; } .grid { width: 100%; height: 100%; display: flex; background: #EEE; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; } .cell { width: calc(25% - 1em); box-sizing: border-box; margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; } p { font: .8em sans-serif; max-width: 100%; height: 5rem; box-sizing: border-box; background: #E4F0F5; padding: .5em; margin: .5em 0 0; } .visible { overflow: visible; } .hidden { overflow: hidden; } .scroll { overflow: scroll; } .auto { overflow: auto; }
L'ús d' overflow
amb un valor diferent a visible
(per defecte) crea un nou context de format de bloc. Això és necessari per motius tècnics — si un flotador es creua amb l'element de desplaçament, el contingut es torna a embolicar per la força després de cada pas de desplaçament, donant lloc a una experiència de desplaçament lent.
Per tal que l' overflow
tingui un efecte, el contenidor a nivell de bloc ha de tenir una alçada definida (height
o max-height
) o white-space
establert a nowrap
.
Nota: La propietat de JavaScript Element.scrollTop
es pot utilitzar per desplaçar un element HTML fins i tot quan overflow
està configurat com hidden
.
Initial value | visible |
---|---|
Applies to | non-replaced block-level elements and non-replaced inline-block elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Sintaxi
La propietat overflow
s'especifica com una sola paraula clau triada de la llista de valors que es mostra a continuació.
Valors
visible
- El contingut no es retalla i es pot mostrar fora de la caixa de contingut. Valor per defecte.
hidden
- El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. No es proporcionen barres de desplaçament.
scroll
- El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. Els navegadors mostren les barres de desplaçament independentment que el contingut estigui o no retallat. (Això evita que les barres de desplaçament apareguin o desapareguin quan el contingut canvia). Les impressores poden imprimir contingut desbordat.
auto
- Depèn de l'agent d'usuari. Si el contingut s'adapta a l'interior de la caixa de contingut, es veurà igual que
visible
, però se segueix establint un nou context de format de bloc. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
overlay
- Es comporta de la mateixa manera que
auto
, però amb les barres de desplaçament sobre el contingut en lloc d'ocupar espai. Només s'admet en navegadors basats en WebKit (p. ex., Safari) i basats en Blink (p. ex., Chrome o Opera).
Extensions Mozilla
-moz-scrollbars-none
- Utilitzeu
overflow: hidden
en el seu lloc. -moz-scrollbars-horizontal
- Es preferible l'ús de
overflow-x
ioverflow-y
. -moz-scrollbars-vertical
- Es preferible l'ús de
overflow-x
ioverflow-y
. -moz-hidden-unscrollable
- Destinat principalment per a ús intern i per temes. Desactiva el desplaçament dels elements arrel XML,
<html>
i<body>
amb les tecles de fletxa del teclat i la roda del ratolí.
Sintaxi formal
visible | hidden | scroll | auto
Exemples
p {
width: 12em;
height: 6em;
border: dotted;
overflow: visible; /* el contingut no es retalla */
}
visible
(per defecte)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: hidden; /* no es proporcionen barres de desplaçament */ }
p { overflow: scroll; /* mostra sempre barres de desplaçament */ }
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* afegeix barres de desplaçament si és necessari */ }
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Especificacions
Especificació | Estat | Comentari |
---|---|---|
CSS Overflow Module Level 3 The definition of 'overflow' in that specification. |
Working Draft | |
CSS Basic Box Model The definition of 'overflow' in that specification. |
Working Draft | No canvia. |
CSS Level 2 (Revision 1) The definition of 'overflow' in that specification. |
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) | 1.0 (1.7 or earlier)[1] | 4.0[2] | 7.0 | 1.0 (85) |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | ? | (Yes) | 1.0 (1)[1] | ? | ? | ? |
[1] A través de Firefox 3.6 (Gecko 1.9.2), la propietat overflow
s'aplica incorrectament als elements del grup de taula (<thead>
, <tbody>
, <tfoot>
). Aquest comportament es corregeix en versions posteriors.
[2] Internet Explorer 4 a 6 amplia un element amb overflow: visible
(valor predeterminat) per adaptar-se al contingut que hi ha dins. height/width
es comportan com min-height/min-width
.
Vegeu també
- Propietats CSS relacionades:
text-overflow
,white-space
,overflow-x
,overflow-y
,clip
,display