8.1 Proprietà text-overflow
L'accorpamento del testo e la gestione della sua visualizzazione sono aspetti importanti del web design, soprattutto quando si lavora con lunghe righe di testo o contenitori con dimensioni limitate. Le proprietà text-overflow, white-space e word-wrap (ora conosciuto come overflow-wrap) permettono di controllare come il testo si comporta in queste situazioni.
La proprietà text-overflow gestisce come viene visualizzato il testo che esce dai limiti del contenitore. Viene utilizzata in combinazione con le proprietà white-space e overflow per creare l'effetto di taglio del testo e l'aggiunta di ellissi.
Valori:
clip: taglia il testo che esce dai limiti del contenitoreellipsis: aggiunge un'ellissi (...) alla fine del testo tagliato
Esempio di utilizzo:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Questo testo verrà tagliato al confine del contenitore.</div>
<div class="container ellipsis">Questo testo verrà tagliato e sostituito con un'ellissi.</div>
</body>
8.2 Proprietà white-space
La proprietà white-space gestisce la gestione dei caratteri di spazio e l'interruzione del testo. Permette di definire come gli spazi, le tabulazioni e le nuove righe vengono gestiti nel testo.
Valori:
normal: spazi e interruzioni di riga vengono gestiti normalmente (predefinito)nowrap: il testo viene visualizzato su una sola riga, senza interruzionipre: spazi e interruzioni di riga vengono mantenuti, come nel tag HTML<pre>pre-wrap: spazi e interruzioni di riga vengono mantenuti, ma il testo può essere diviso su una nuova riga se necessariopre-line: le interruzioni di riga vengono mantenute, ma gli spazi vengono gestiti normalmentebreak-spaces: spazi e interruzioni di riga vengono mantenuti, e spazi lunghi possono causare interruzioni di riga
Esempio di utilizzo:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Questo testo verrà trasferito alla riga successiva, se non ci sarà abbastanza spazio.</div>
<div class="nowrap">Questo testo non verrà trasferito alla riga successiva e verrà visualizzato su una sola riga.</div>
<div class="pre">
Questo testo manterrà
tutti gli spazi e le interruzioni di linea.
</div>
<div class="pre-wrap">
Questo testo verrà trasferito alla riga successiva, ma manterrà anche
tutti gli spazi e le interruzioni di linea.
</div>
</body>
8.3 Proprietà overflow-wrap
La proprietà overflow-wrap (precedentemente conosciuta come word-wrap) gestisce l'interruzione delle parole che escono dai limiti del contenitore. Permette di prevenire il traboccamento del contenitore con parole lunghe che non possono essere divise.
Valori
normal: l'interruzione delle parole viene eseguita secondo le regole standardbreak-word: l'interruzione delle parole viene eseguita, anche se è necessario dividere la parola in parti
Esempio di utilizzo:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Questo testo verrà trasferito alla riga successiva, se non ci sarà abbastanza spazio.</div>
<div class="container break-word">QuestalunghissimaparoLANONverràsuddivisainpartise non ci sarà abbastanza spazio.</div>
</body>
Spiegazione del codice:
overflow-wrap: normal;: l'interruzione delle parole segue le regole standard, senza divisione delle paroleoverflow-wrap: break-word;: le parole lunghe saranno divise e trasferite alla riga successiva se necessario
8.4 Uso combinato delle proprietà
Le proprietà text-overflow, white-space e word-wrap sono spesso usate insieme per ottenere l'effetto desiderato di visualizzazione del testo in contenitori con dimensioni limitate.
Esempio di utilizzo:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Questo testo verrà tagliato e sostituito con un'ellissi se non ci sarà abbastanza spazio nel contenitore.</div>
</body>
Spiegazione del codice:
white-space: nowrap;: il testo viene visualizzato su una sola riga, senza interruzionioverflow: hidden;: nasconde il testo che esce dai limiti del contenitoretext-overflow: ellipsis;: aggiunge un'ellissi alla fine del testo tagliatooverflow-wrap: break-word;: divide le parole lunghe, se non c'è abbastanza spazio
GO TO FULL VERSION