Word-wrap CSS3 per forzare il testo ad andare a capo

Di cosa parliamo? Questa proprietà consente ad una stringa, se questa è troppo lunga per essere contenuta all’interno di un […]
Word-wrap CSS3 per forzare il testo ad andare a capo

Di cosa parliamo?

Questa proprietà consente ad una stringa, se questa è troppo lunga per essere contenuta all’interno di un riquadro di riga, di spezzarsi per evitare l’overflow della stessa. La situazione più ricorrente è quella di un contenitore a larghezza fissa, all’interno del quale sono contenute una o più parole molto lunghe.

Cross Browser?

Stranamente la compatibilità è molto estesa, proprio come mostra la seguente tabella prelevata dal sito caniuse.com

word-wrap

Codice CSS relativo ad un box con larghezza fissa:

#content{
    width:100px;
    word-wrap:break-word;

    background:#069;
    padding:5px;
    color:white;
}

Un’unica pecca

L’unica pecca di questa regola è il mancato supporto della sillabazione e del consueto trattino che sancisce l’interruzione di una parola.

Provalo subito

Prova la demo Consulta il codice
  • Beh! davvero interessante di regole CSS se ne imparano ogni giorno… sì, peccato per la sillabazione… ma se sei in una situazione disperata, credo ci si possa accontentare di una soluzione del genere.

  • Immagino che il caso che si verifica più spesso è quello in cui dobbiamo inserire dei link per esteso più o meno lunghi e non sappiamo a priori se tutti possano entrare nel riquadro di riga da noi stabilito. Comunque dai faremo a meno della silabazione!!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github