diff options
Diffstat (limited to 'files/ca/web/css/overflow-x/index.html')
| -rw-r--r-- | files/ca/web/css/overflow-x/index.html | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/files/ca/web/css/overflow-x/index.html b/files/ca/web/css/overflow-x/index.html new file mode 100644 index 0000000000..28ed745f75 --- /dev/null +++ b/files/ca/web/css/overflow-x/index.html @@ -0,0 +1,192 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-x +--- +<div>{{CSSRef}}</div> + +<p>La propietat<strong> <code>overflow-x</code></strong> especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores esquerra i dreta.</p> + +<pre class="brush:css no-line-numbers">/* El contingut no es retallat */ +overflow-x: visible; + +/* El contingut es retallat, sense barres desplaçament */ +overflow-x: hidden; + +/* El contingut es retallat, amb barres desplaçament */ +overflow-x: scroll; + +/* Deixa que el navegador decideixi */ +overflow-x: auto; + +/* Valors globals */ +overflow-x: inherit; +overflow-x: initial; +overflow-x: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<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.</dd> + <dt><code>hidden</code></dt> + <dd>El contingut es retalla <span class="short_text" id="result_box" lang="ca"><span>i no es proporcionen barres de desplaçament</span></span>.</dd> + <dt><code>scroll</code></dt> + <dd>El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.</dd> + <dt><code>auto</code></dt> + <dd>Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li><code>overflow-x:hidden</code> — <span class="short_text" id="result_box" lang="ca"><span>amaga el text fora de la caixa</span></span> + <div id="div1"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> + + <li><code>overflow-x:scroll</code> — afegeix sempre una barra de desplaçament + <div id="div2"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> + + <li><code>overflow-x:visible</code> — mostra el text fora de la caixa, si és necessari + <div id="div3"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> + + <li><code>overflow-x:auto</code> — <span class="short_text" id="result_box" lang="ca"><span>a la majoria de navegadors, equivalent a</span></span> <code>scroll</code> + <div id="div4"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#div1, #div2, #div3, #div4 { + border: 1px solid black; + width: 250px; + margin-bottom: 12px; +} + +#div1 { overflow-x: hidden;} +#div2 { overflow-x: scroll;} +#div3 { overflow-x: visible;} +#div4 { overflow-x: auto;} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<figure> +<p>{{EmbedLiveSample("Examples", "100%", "270")}}</p> +</figure> + +<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-x', 'overflow-x')}}</td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#overflow-x', 'overflow-x')}}</td> + <td>{{Spec2('CSS3 Box')}}</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.9.1")}}</td> + <td>5.0<sup>[1]</sup></td> + <td>9.5</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <span id="result_box" lang="ca"><span>Internet Explorer 8 va introduir</span></span> <code> -ms-overflow-x </code> <span id="result_box" lang="ca"><span>com sinònim de</span></span> <code> overflow-x</code>. <span id="result_box" lang="ca"><span>No utilitzeu el prefix</span></span> <code>-ms-</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Propietats CSS relacionades: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> |