diff options
Diffstat (limited to 'files/ca/web/css/overflow')
| -rw-r--r-- | files/ca/web/css/overflow/index.html | 273 |
1 files changed, 0 insertions, 273 deletions
diff --git a/files/ca/web/css/overflow/index.html b/files/ca/web/css/overflow/index.html deleted file mode 100644 index cebe7265c0..0000000000 --- a/files/ca/web/css/overflow/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |