Sintassi

Significato dei valori principali:

• visible: il contenuto traboccante in orizzontale sarà visibile (default).

• hidden: il contenuto traboccante orizzontale sarà nascosto.

• scroll: viene sempre mostrata una barra di scorrimento orizzontale, anche se non necessaria.

• auto: la barra orizzontale appare solo se necessaria.

• clip: tronca il contenuto orizzontale senza barra di scorrimento (CSS3+).

Esempio proprietà: overflow-x

Codice Esempio: overflow-x

CODE: CSS

1. .overflow-x-example {

2.   width: 300px;

3.   height: 100px;

4.   border: 2px solid #2196f3;

5.   overflow-x: auto;

6.   overflow-y: hidden;

7.   white-space: nowrap;

8.   padding: 10px;

9.   background-color: #e3f2fd;

10.   font-size: 16px;

11.   color: #000;

12. }

Contenuto Esempio: overflow-x

  
  <style>
    .overflow-x-example {
      width: 300px;
      height: 100px;
      border: 2px solid #2196f3;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding: 10px;
      background-color: #e3f2fd;
      font-size: 16px;
      color: #000;
    }
  </style>
  
  <div class="overflow-x-example">
    Questo è un contenuto molto lungo che si estende oltre la larghezza dell'elemento e può essere fatto scorrere orizzontalmente.
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser