diff options
Diffstat (limited to 'files/ca/web/css/overflow/index.html')
| -rw-r--r-- | files/ca/web/css/overflow/index.html | 273 |
1 files changed, 273 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p>La propietat CSS <strong><code>overflow</code></strong> 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 <a href="/en-US/docs/Glossary/Block/CSS">contenidor a nivell de bloc</a>.</p> + +<pre class="brush:css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>El contingut no es retallat</span></span> */ +overflow: visible; + +/* <span id="result_box" lang="ca"><span>El contingut es retallat, sense barres de desplaçament</span></span> */ +overflow: hidden; + +/* <span id="result_box" lang="ca"><span>El contingut es retallat, amb barres de desplaçament</span></span> */ +overflow: scroll; + +/* Deixa que el navegador decideixi */ +overflow: auto; + +/* Valors globals */ +overflow: inherit; +overflow: initial; +overflow: unset; +</pre> + +<div class="hidden" id="overflow"> +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; }</pre> +</div> + +<p>{{EmbedLiveSample("overflow", "100%", 200, "", "", "example-outcome-frame")}}</p> + +<p>L'ús d' <code>overflow</code> amb un valor diferent a <code>visible</code> (per defecte) crea un nou <a href="/en-US/docs/CSS/block_formatting_context">context de format de bloc</a>. 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.</p> + +<p>Per tal que l' <code>overflow</code> tingui un efecte, el contenidor a nivell de bloc ha de tenir una alçada definida (<code>height</code> o <code>max-height</code>) o <code>white-space</code> establert a <code>nowrap</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>La propietat de JavaScript</span></span> {{domxref("Element.scrollTop")}} <span id="result_box" lang="ca"><span>es pot utilitzar per desplaçar un element HTML fins i tot quan</span></span> <code>overflow</code> <span id="result_box" lang="ca"><span>està configurat com</span></span> <code>hidden</code>.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>overflow</code> s'especifica com una sola paraula clau triada de la llista de valors que es mostra a continuació.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>El contingut no es retalla i es pot mostrar fora de la caixa de contingut. Valor per defecte.</dd> + <dt><code>hidden</code></dt> + <dd>El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. No es proporcionen barres de desplaçament.</dd> + <dt><code>scroll</code></dt> + <dd>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.</dd> + <dt><code>auto</code></dt> + <dd>Depèn de l'agent d'usuari. Si el contingut s'adapta a l'interior de la caixa de contingut, es veurà igual que <code>visible</code>, 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.</dd> +</dl> + +<dl> + <dt><code>overlay</code> {{experimental_inline}} {{deprecated_inline}}</dt> + <dd>Es comporta de la mateixa manera que <code>auto</code>, 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).</dd> +</dl> + +<h4 id="Extensions_Mozilla"><span id="result_box" lang="ca"><span>Extensions Mozilla</span></span></h4> + +<dl> + <dt><code>-moz-scrollbars-none</code> {{obsolete_inline}}</dt> + <dd>Utilitzeu <code>overflow: hidden</code> en el seu lloc.</dd> + <dt><code>-moz-scrollbars-horizontal</code> {{deprecated_inline}}</dt> + <dd>Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.</dd> + <dt><code>-moz-scrollbars-vertical</code> {{deprecated_inline}}</dt> + <dd>Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.</dd> + <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt> + <dd>Destinat principalment per a ús intern i per temes. Desactiva el desplaçament dels elements arrel XML, <code><html></code> i <code> <body></code> amb les tecles de fletxa del teclat i la roda del ratolí.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">p { + width: 12em; + height: 6em; + border: dotted; + overflow: visible; /* <span class="short_text" id="result_box" lang="ca"><span>el contingut no es retalla</span></span> */ +} +</pre> + +<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (per defecte)<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: hidden; /* <span class="short_text" id="result_box" lang="ca"><span>no es proporcionen barres de desplaçament</span></span> */ } +</pre> + +<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: scroll; /* <span class="short_text" id="result_box" lang="ca"><span>mostra sempre barres de desplaçament</span></span> */ } +</pre> + +<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: auto; /* afegeix barres de desplaçament si és necessari */ } +</pre> + +<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No canvia.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>4.0<sup>[2]</sup></td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A través de Firefox 3.6 (Gecko 1.9.2), la propietat <code>overflow</code> s'aplica incorrectament als elements del grup de taula (<code><thead></code> , <code><tbody></code> , <code><tfoot></code>). Aquest comportament es corregeix en versions posteriors.</p> + +<p>[2] Internet Explorer 4 a 6 amplia un element amb <code>overflow: visible</code> (valor predeterminat) per adaptar-se al contingut que hi ha dins. <code>height/width</code> es comportan com <code>min-height/min-width</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Propietats CSS relacionades: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> |