CSS
straripamento

Sintassi

• overflow: visibile | nascosto | scorrere | auto | iniziale | ereditare;

Parametri

Osservazioni

overflow: scorrere

HTML

<div>
    This div is too small to display its contents to display the effects of the overflow property.
</div>

CSS

div {
    width:100px;
    height:100px;
    overflow:scroll;
}

Risultato

Il contenuto sopra è ritagliato in una scatola da 100 px per 100 px, con lo scrolling disponibile per visualizzare il contenuto traboccante.

La maggior parte dei browser desktop visualizza barre di scorrimento orizzontali e verticali, indipendentemente dal fatto che il contenuto sia tagliato o meno. Questo può evitare problemi con le barre di scorrimento che appaiono e scompaiono in un ambiente dinamico. Le stampanti possono stampare contenuti in eccesso.

trabocco-wrap

overflow-wrap dice a un browser che può spezzare una riga di testo all'interno di un elemento mirato su più linee in un posto altrimenti inviolabile. Utile nell'impedire una lunga stringa di testo che causa problemi di layout a causa del sovraccarico del suo contenitore.

CSS

div {
    width:100px;
    outline: 1px dashed #bbb;
}

#div1 {
    overflow-wrap:normal;
}

#div2 {
    overflow-wrap:break-word;
}

HTML

<div id="div1">
      <strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>

<div id="div2">
      <strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>

overflow: visibile

HTML

<div>
     Even if this div is too small to display its contents, the content is not clipped.
</div>

CSS

div {
     width:50px;
     height:50px;
     overflow:visible;
}

Risultato

Il contenuto non viene ritagliato e verrà visualizzato all'esterno della casella del contenuto se supera la dimensione del contenitore.

Contesto di formattazione dei blocchi creato con overflow

L'utilizzo della proprietà di overflow con un valore diverso da visible creerà un nuovo contesto di formattazione dei blocchi . Questo è utile per allineare un elemento di blocco accanto a un elemento flottato.

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

Risultato

Questo esempio mostra come i paragrafi all'interno di un div con il set di proprietà di overflow interagiranno con un'immagine fluttuante.

overflow-x e overflow-y

Queste due proprietà funzionano in modo simile alla proprietà di overflow e accettano gli stessi valori. Il parametro overflow-x funziona solo sull'asse x o da sinistra a destra. L' overflow-y funziona sull'asse y o dall'alto verso il basso.

HTML

<div id="div-x">
    If this div is too small to display its contents, 
    the content to the left and right will be clipped.
</div>

<div id="div-y">
    If this div is too small to display its contents, 
    the content to the top and bottom will be clipped.
</div>

CSS

div {
    width: 200px;
    height: 200px;
}

#div-x {
    overflow-x: hidden;
}

#div-y {
    overflow-y: hidden;
}