Ricerca…


Sintassi

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

Parametri

Valore di Overflow Dettagli
visible Mostra tutto il contenuto in eccesso all'esterno dell'elemento
scroll Nasconde il contenuto che trabocca e aggiunge una barra di scorrimento
hidden Nasconde il contenuto che trabocca, entrambe le barre di scorrimento scompaiono e la pagina diventa fissa
auto Uguale a scroll se il contenuto fuoriesce, ma non aggiunge barra di scorrimento se il contenuto si adatta
inherit Eredita il valore dell'elemento genitore per questa proprietà

Osservazioni

La proprietà di overflow specifica se ritagliare il contenuto, eseguire il rendering barre di scorrimento o estendere un contenitore per visualizzare il contenuto quando questo esplode nel suo contenitore a livello di blocco.

Quando un elemento è troppo piccolo per visualizzarne il contenuto, cosa succede? Per impostazione predefinita, il contenuto si sovrapporrà e verrà visualizzato all'esterno dell'elemento. Questo fa sembrare il tuo lavoro pessimo. Volete che il vostro lavoro abbia un bell'aspetto, quindi impostate la proprietà di overflow per gestire il contenuto in eccesso in un modo desiderabile.

I valori per la proprietà di overflow sono identici a quelli per le proprietà overflow-x e overflow-y , eccetto che si applicano lungo ciascun asse

La proprietà overflow-wrap è stata anche conosciuta come la proprietà word-wrap .

Nota importante: l' utilizzo della proprietà di overflow con un valore diverso da visibile creerà un nuovo contesto di formattazione dei blocchi.

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

Immagine che mostra un div 100px per 100px con barre di scorrimento

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>

inserisci la descrizione dell'immagine qui

overflow-wrap - Value Dettagli
normal Lascia una parola in overflow se è più lunga della linea
break-word Dividerà una parola in più righe, se necessario
inherit Eredita il valore dell'elemento genitore per questa proprietà

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

inserisci la descrizione dell'immagine qui

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

inserisci la descrizione dell'immagine qui

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


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow