Proprietà CSS overflow-x — Valori ed Esempi

La proprietà overflow-x controlla cosa succede al contenuto che si estende oltre i bordi sinistro e destro di un box. Puoi lasciarlo fuoriuscire, tagliarlo silenziosamente o aggiungere una barra di scorrimento orizzontale.

overflow-x fa parte della proprietà abbreviata CSS overflow e funziona in tandem con overflow-y, che gestisce l'overflow verticale.

Informazione

Se overflow-y è impostato su hidden, scroll o auto, e overflow-x rimane al suo valore predefinito visible, i browser calcolano automaticamente overflow-x come auto. Un valore visible non può coesistere con un valore diverso da visible sull'asse perpendicolare.

Valore iniziale	`visible`
Si applica a	Box-container a blocco, container flex e container grid.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	`object.style.overflowX = "scroll";`

Sintassi

overflow-x: visible | hidden | scroll | auto | clip | initial | inherit;

Valori

Valore	Descrizione
`visible`	Il contenuto non viene ritagliato. Viene visualizzato al di fuori dei bordi sinistro e destro del padding box. Questo è il valore predefinito.
`hidden`	Il contenuto viene ritagliato ai bordi del padding box. Non viene mostrata alcuna barra di scorrimento e il contenuto tagliato non è accessibile.
`scroll`	Il contenuto viene ritagliato e viene sempre mostrata una barra di scorrimento orizzontale, anche se il contenuto ci sta.
`auto`	Il contenuto viene ritagliato solo quando va in overflow. La barra di scorrimento appare solo quando necessario. Preferibile rispetto a `scroll` nella maggior parte dei casi.
`clip`	Come `hidden`, ma impedisce anche lo scorrimento programmatico tramite JavaScript (`scrollLeft`, `scroll()`). Supportato nei browser moderni.
`initial`	Reimposta la proprietà al suo valore predefinito (`visible`).
`inherit`	Eredita il valore dall'elemento genitore.

Quando usare ciascun valore

visible — il valore predefinito. Usalo quando l'overflow è intenzionale, ad esempio per un tooltip o un menu a discesa che deve estendersi oltre il suo contenitore.
hidden — usalo per mascherare l'overflow nei componenti di design (card con immagini, slider) dove il contenuto tagliato non dovrebbe mai essere raggiunto. Tieni presente che qualsiasi contenuto tagliato risulta inaccessibile agli utenti che navigano con tastiera e agli screen reader.
scroll — usalo quando vuoi sempre una barra di scorrimento visibile, ad esempio nelle visualizzazioni di confronto affiancato, in modo che il layout non cambi quando la lunghezza del contenuto varia.
auto — la scelta più comune per i container responsive. La barra di scorrimento appare solo quando il contenuto va effettivamente in overflow, mantenendo il layout pulito.
clip — usalo quando vuoi lo stesso taglio netto di hidden ma hai anche bisogno di impedire a JavaScript di scorrere programmaticamente l'elemento (utile in alcune tecniche di animazione).

Pattern pratici

Un caso d'uso comune è un container con scorrimento orizzontale per contenuti larghi come tabelle di dati o blocchi di codice. Combina overflow-x: auto con white-space: nowrap (vedi white-space) per mantenere il contenuto su una sola riga:

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

Affinché l'ellissi di text-overflow (…) funzioni, è necessario overflow-x: hidden (o overflow: hidden) insieme a white-space: nowrap:

.truncate {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Esempi

overflow-x: scroll

Il container è largo solo 40 px. Con scroll, viene sempre mostrata una barra di scorrimento orizzontale in modo che gli utenti possano raggiungere il resto del testo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Provalo tu stesso »

overflow-x: visible

Con visible, il testo viene visualizzato al di fuori del box stretto e si sovrappone al contenuto circostante. Questo è il comportamento predefinito del browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Provalo tu stesso »

overflow-x: hidden

Con hidden, il testo viene silenziosamente ritagliato al bordo destro. Non viene mostrata alcuna barra di scorrimento e la parte tagliata non è raggiungibile.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Provalo tu stesso »

overflow-x: auto

Con auto, la barra di scorrimento appare solo quando il contenuto va effettivamente in overflow — l'opzione più pulita per la maggior parte dei layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Provalo tu stesso »

Tutti i valori a confronto

L'esempio seguente mostra tutti e quattro i valori principali affiancati per confrontarne l'effetto visivo in una volta sola.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Provalo tu stesso »

Proprietà correlate

overflow — abbreviazione che imposta sia overflow-x che overflow-y in una volta sola.
overflow-y — controlla il comportamento dell'overflow verticale (superiore/inferiore).
overflow-wrap — specifica se il browser può spezzare le parole lunghe per prevenire l'overflow orizzontale.
text-overflow — controlla come il testo in overflow viene segnalato all'utente (es. ellissi).
white-space — determina se il testo va a capo; combinare white-space: nowrap con overflow-x è un pattern comune.

Esercizio

Pratica

Quale valore di overflow-x mostra sempre una barra di scorrimento orizzontale, anche quando il contenuto ci sta?

visibleautoscrollhidden