path: root/files/ca/web/css/overflow/index.html

---
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">&lt;div class="grid"&gt;
  &lt;div class="row"&gt;
    &lt;div class="cell"&gt;
      visible
      &lt;p class="visible"&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      hidden
      &lt;p class="hidden"&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      scroll
      &lt;p class="scroll"&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      auto
      &lt;p class="auto"&gt;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.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</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>&lt;html&gt;</code> i <code> &lt;body&gt;</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>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</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>