From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/overflow/index.html | 273 +++++++++++++++++++++++++++++++++++ 1 file changed, 273 insertions(+) create mode 100644 files/ca/web/css/overflow/index.html (limited to 'files/ca/web/css/overflow') diff --git a/files/ca/web/css/overflow/index.html b/files/ca/web/css/overflow/index.html new file mode 100644 index 0000000000..fa1264359d --- /dev/null +++ b/files/ca/web/css/overflow/index.html @@ -0,0 +1,273 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/overflow +--- +
{{CSSRef}}
+ +

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;
+
+ + + +

{{EmbedLiveSample("overflow", "100%", 200, "", "", "example-outcome-frame")}}

+ +

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 {{domxref("Element.scrollTop")}} es pot utilitzar per desplaçar un element HTML fins i tot quan overflow està configurat com hidden.

+
+ +

{{cssinfo}}

+ +

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 {{experimental_inline}} {{deprecated_inline}}
+
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 {{obsolete_inline}}
+
Utilitzeu overflow: hidden en el seu lloc.
+
-moz-scrollbars-horizontal {{deprecated_inline}}
+
Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.
+
-moz-scrollbars-vertical {{deprecated_inline}}
+
Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.
+
-moz-hidden-unscrollable {{non-standard_inline}}
+
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

+ +
{{csssyntax}}
+ +

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 */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
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óEstatComentari
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}} 
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}No canvia.
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}[1]4.0[2]7.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[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é

+ + -- cgit v1.2.3-54-g00ecf