overflow-x

La propietat overflow-x 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.

/* 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;

Sintaxi

Valors

visible

El contingut no es retalla i es pot mostrar fora de la caixa de contingut.

hidden

El contingut es retalla i no es proporcionen barres de desplaçament.

scroll

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.

auto

Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.

Sintaxi formal

visible | hidden | scroll | auto

Exemples

HTML

<ul>
  <li><code>overflow-x:hidden</code> —  amaga el text fora de la caixa
    <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> — a la majoria de navegadors, equivalent a <code>scroll</code>
    <div id="div4">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>
</ul>

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;}

Resultat

Especificacions

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] Internet Explorer 8 va introduir -ms-overflow-x com sinònim de overflow-x. No utilitzeu el prefix -ms-.

Vegeu també

• Propietats CSS relacionades: text-overflow, white-space, overflow, overflow-y, clip, display