"Sono stato bocciato a parecchi esami. Un mio amico invece, li ha passati tutti a pieni voti. Ora è ingegnere e lavora in Microsoft. Io sono il proprietario."  - Bill Gates  •  "Se riesco a fare qualcosa in 10 minuti, è perché ho passato anni a studiarlo."  - Bill Gates  •  "Il vostro lavoro riempirà gran parte della vostra vita, e l'unico modo per essere veramente soddisfatti è fare ciò che ritenete sia un grande lavoro."  - Steve Jobs  •  "Siate affamati. Siate folli."  - Steve Jobs  •  

cinque •

ZERO

.NET
AI
CLOUD COMPUTING
CMS
CSS
CURL
GIT
HTML
JAVASCRIPT
LINUX
Miscellaneous
MySQL
PHP
SQL

CSS

BOOTSTAP     SASS    

←

{CSS} La proprietà Overflow (Overflow-y, Overflow-x) e Wordbreak

home / css /

Lucio Paolo Asciolla

Senior Full Stack Developer

Overflow

La proprietà Overflow è strettamente legata alle proprietà height e width ed è utilizzata nel caso in cui il contenuto superi le dimensioni fissate.
Essa serve proprio a gestire il comportamento del contenuto.

Sintassi:
SELETTORE { OVERFLOW:VALORE; }

visiblevalore iniziale di default
hiddennascosto, il contenuto eccedente non viene mostrato
scrollil browser crea barre di scorrimento che consentono di fruire del contenuto eccedente
autoil browser tratta il contenuto eccedente secondo le sue impostazioni predefinite
.box1{
    top: 100px;
    left: 100px;
    position: relative;
    width: 100px;  /*larghezza fissata*/
    height: 100px; /*altezza fissata*/
    background: blue;
    z-index: 5;
    overflow: visible;
}

Overflow-y & Overflow-x

E' possibile decidere quale o quali barre di scorrimento visualizzare attraverso le proprietà "specifiche" della proprietà overflow:

overflow-yasse y (scroll verticale)
overflow-xasse x (scroll orizzontale)
.box1{
    top: 100px;
    left: 100px;
    position: relative;
    width: 100px;  
    height: 100px; 
    background: blue;
    z-index: 5;
    overflow-y: scroll; /* impostato scroll verticale */
    overflow-x: hidden; /* scroll orizzontale nascosto */
}

Wordbreak

Disabilitando lo scroll x attraverso la proprietà overflow-x:hidden potremmo dover occuparci dell' eccedenza "orizzontale" dei nostro contenuto testuale.
E' possibile stabilire il comportamento di segmentazione del testo attraverso la proprietà word-break.

Sintassi:
SELETTORE { WORD-BREAK: VALORE; }

Tra i valori più utilizzati:

normalè il comportamento di default
keep-allcompleta le parole possibili sulla stessa riga in base allo spazio disponibile e va accapo (coincide con "normal")
break-allla parola può essere spezzata in qualsiasi carattere