1 files changed, 123 insertions, 0 deletions
diff --git a/files/ca/learn/css/building_blocks/overflowing_content/index.html b/files/ca/learn/css/building_blocks/overflowing_content/index.html
new file mode 100644
index 0000000000..2ee0dc6129
--- /dev/null
+++ b/files/ca/learn/css/building_blocks/overflowing_content/index.html
@@ -0,0 +1,123 @@
+---
+title: Desbordament de contingut
+slug: Learn/CSS/Building_blocks/Desbordament_de_contingut
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En aquest apartat veurem un altre concepte important en CSS: el <strong>desbordament</strong>. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisits:</th>
+   <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Entendre el desbordament i com gestionar-lo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Què_és_el_desbordament">Què és el desbordament?</h2>
+
+<p>Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). <strong>El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap.</strong> El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.</p>
+
+<h2 id="El_CSS_tracta_devitar_«la_pèrdua_de_dades»">El CSS tracta d'evitar «la pèrdua de dades»</h2>
+
+<p>Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.</p>
+
+<p>El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (<code>height</code>). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p>Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?</p>
+
+<p>Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.</p>
+
+<p>Si has restringit la mida d’una caixa amb <code>width</code> o <code>height</code>, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.</p>
+
+<p>En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!</p>
+
+<h2 id="La_propietat_overflow">La propietat <code>overflow</code></h2>
+
+<p>La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és <code>visible</code>, és per això que per defecte podem veure el nostre contingut quan es desborda.</p>
+
+<p>Si vols que el contingut que desborda es talli, pots establir el valor <code>overflow: hidden</code> per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes <code>overflow: scroll</code>, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.</p>
+
+<p><strong>Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>En l’exemple anterior només hem de desplaçar-nos per l’eix <code>y</code>, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir <code>overflow-y: scroll</code>, i et desplaçaries només sobre l'eix <code>y</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>També pots desplaçar-te sobre l'eix <em>x</em> amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat <a href="/ca/docs/Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS">Dimensionament d’elements amb CSS</a>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p>Igual que amb <code>scroll</code>, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: pots especificar el desplaçament en x i en y amb la propietat <code>overflow</code> passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a <code>overflow-x</code> i la segona a <code>overflow-y</code>. En cas contrari, tant <code>overflow-x</code> com <code>overflow-y</code> s’estableixen en el mateix valor. Per exemple, <code>overflow: scroll hidden</code> configuraria <code>overflow-x</code> per a <code>scroll</code> i <code>overflow-y</code> per a <code>hidden</code>.</p>
+</div>
+
+<p>Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza <code>overflow: auto</code>. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.</p>
+
+<p><strong>En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="El_desbordament_estableix_un_context_de_formatació_de_bloc">El desbordament estableix un context de formatació de bloc</h2>
+
+<p>Hi ha un concepte en CSS que s'anomena <strong>block formatting context</strong> (<em>context de formatació de bloc</em>) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara <code>scroll</code> o <code>auto</code>, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor <code>overflow</code> es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.</p>
+
+<h2 id="Desbordaments_no_volguts_en_el_disseny_web">Desbordaments no volguts en el disseny web</h2>
+
+<p>Els mètodes de disseny moderns (tal com es recull en el mòdul de <a href="/ca/docs/Learn/CSS/Disseny_CSS">Disseny de pàgines web amb CSS</a>) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.</p>
+
+<p>En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.</p>
+
+<h2 id="Posa_a_prova_els_teus_coneixements">Posa a prova els teus coneixements</h2>
+
+<p>Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a>.</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diferents direccions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionament d’elements amb CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i controls de formulari</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li>
+</ol>