Lez.25 - Corso Intermedio Css

OVERFLOW - La Proprietà Overflow

La Proprietà overflow

Overflow (straripamento) è la proprietà che consente di determinare come si deve comportare il browser quando un contenuto fuoriesce dal suo contenitore.

Ma passiamo subito ad esaminare alcuni suoi valori:
overflow: visible; visible (visibile) valore di defoult, dice al browser "fammi vedere la parte che fuoriesce"

overflow: hidden; hidden (nascosto), dice al browser "nascondi la parte che fuoriesce"

overflow: scroll; scroll (scorrere) in questo caso il cotenitore viene dotato di barre di scorrimento mediante le quali è possibile scrollare, cioè scorrere, in verticale se il contenuto è più esteso in verticale o in orizzontale se il contenuto è più esteso in orizzontale o in entrambi i casi se il contenuto è più esteso sia in orizzontale che sia in verticale.
Nel caso in cui il contenuto non è più esteso del suo contenitore, le barre di scorrimento ci saranno ugualmente, si vedranno sullo schermo ma non avranno nessuna funzione.

overflow: auto; il contenitore può essere dotato o non dotato di barre di scorrrimento in dipendenza della quantità di contenuto che ha.
Cioè se il contento è eccedente al suo cotenitore, lo stesso, sarà dotato di barre di scorrimento.
Mentre, se il cotenuto entra completamente nel suo contenitore, con il valore auto, il contenitore non sarà dotato di barre di scorrimento.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>La proprietà Overflow</title>
  <meta charset="utf-8">
  <style type="text/css">
    div {
	    background-color: chartreuse;
	    width: 150px;
	    height: 100px;
	    overflow: auto;
	    margin-bottom: 20px;
    }
    .contenitore {
	    background-color: cyan;
	    color: red; 
	    width: 250px;
            overflow: auto;
            font-family: courier new, courier, monospace;
            font-size: 14px;
            line-height: 10px;
    }
  </style>
 </head>
 <body>			    
    <h1>Overflow (straripamento)</h1>
    <div>
       <p>Paragrafo 1</p>
       <p>Paragrafo 2</p>
       <p>Paragrafo 3</p>
       <p>Paragrafo 4</p>
       <p>Paragrafo 5</p>
    </div>
    <div class="contenitore">
       <pre>
         <p>Paragrafo 1 Con altro testo per allungare il paragrafo.</p>
         <p>Paragrafo 2 Con altro testo per allungare il paragrafo.</p>
         <p>Paragrafo 3 Con altro testo per allungare il paragrafo.</p>
         <p>Paragrafo 4 Con altro testo per allungare il paragrafo.</p>
         <p>Paragrafo 5 Con altro testo per allungare il paragrafo.</p>
       </pre>
     </div>
 </body>               
</html>