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;

Initial valuevisible
Applies toBlock-containers, flex containers, and grid containers
Inheritedno
Computed valuecom s'especifica, excepte que si overflow-x o b├ę overflow-y s├│n diferents de visible o clip, aquests dos valors computen a auto o hidden respectivament
Animation typediscrete

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 | clip | 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

Especificaci├│ Estat Comentari
CSS Overflow Module Level 3
The definition of 'overflow-x' in that specification.
Working Draft  
CSS Basic Box Model
The definition of 'overflow-x' in that specification.
Candidate Recommendation Definici├│ inicial.

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!

Descripci├│ Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 (Yes) 3.5 (1.9.1) 5.0[1] 9.5 3.0
Descripci├│ Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 (Yes) (Yes) 1.0 (1.9.1) (Yes) (Yes) (Yes)

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

Vegeu tamb├ę