CSS per il testo: quando le parole non ci stanno

Un titolo troppo lungo, una parola senza spazi (un URL, un nome di file), un testo che deve fermarsi esattamente a tre righe: sono tutti lo stesso problema: il testo non entra nel contenitore; ma ciascuno ha bisogno di una proprietà CSS diversa.

Testo che non va a capo: da dove partire

Se stai cercando come mandare a capo il testo in CSS, prima chiediti che cosa vuoi ottenere: la proprietà giusta cambia a seconda del sintomo.

• Il testo resta su una riga ed esce dal box: controlla che non ci sia un white-space: nowrap ereditato da un elemento genitore. Il valore predefinito è normal, che va a capo da solo.
• Una parola lunga (un URL, un nome di file) sfonda il contenitore: serve overflow-wrap: break-word, vedi il punto 3.
• Vuoi rispettare gli a capo scritti nel testo, per esempio quelli di un campo di testo salvato nel database: white-space: pre-line mantiene le interruzioni di riga e compatta gli spazi multipli.
• Vuoi l'opposto, niente a capo e i tre puntini: combina white-space: nowrap con overflow: hidden e text-overflow: ellipsis, vedi il punto 1.

Un a capo in un punto preciso, invece, non è un lavoro per il CSS: si scrive nell'HTML con <br>, e solo dove l'interruzione fa parte del contenuto, come in un indirizzo o nei versi di una poesia.

Fonte: MDN Web Docs: «white-space»: con pre-line le sequenze di spazi vengono compattate e le interruzioni di riga del testo vengono mantenute.

1. text-overflow: l'ellissi, ma solo con la combo giusta

text-overflow: ellipsis mostra «…» al posto del testo tagliato. Questa proprietà da sola non basta, non forza nemmeno l'overflow a verificarsi. Servono sempre anche overflow: hidden e white-space: nowrap.

.titolo-troncato {
    width: 200px;
    white-space: nowrap;      /* impedisce di andare a capo */
    overflow: hidden;         /* nasconde il testo in eccesso */
    text-overflow: ellipsis;  /* mostra i tre puntini */
}

Fonte: MDN Web Docs — «text-overflow»: la proprietà non forza l'overflow a verificarsi; richiede overflow e white-space impostati appositamente.

2. white-space: come trattare spazi e a capo

nowrap impedisce al testo di andare a capo: resta tutto su una riga sola, anche se supera il contenitore, da cui poi overflow e text-overflow decidono cosa fare con l'eccedenza.

p { 
   white-space: nowrap; 
} 
/* niente a capo: tutto su una riga */

Da tenere presente: MDN nota che nowrap impedisce l'andata a capo, ma non impedisce a un contenuto non spezzabile di uscire comunque dal contenitore se è più largo della sua dimensione disponibile, per quello serve overflow-wrap.

Fonte: MDN Web Docs — «text-wrap-mode»: con nowrap il testo va in overflow invece di andare a capo su più righe.

3. overflow-wrap: spezzare la parola troppo lunga

Un URL lunghissimo o una parola senza spazi può uscire dal contenitore anche con il wrapping normale attivo, semplicemente perché non c'è un punto dove andare a capo. overflow-wrap: break-word (o anywhere) permette al browser di spezzare quella parola, come ultima risorsa, quando altrimenti causerebbe un overflow.

.box { 
    inline-size: 150px; overflow-wrap: break-word; /* spezza solo se necessario */
 }

Nota tecnica dal manuale: word-break: break-word, che sembra fare la stessa cosa, è deprecato: si comporta come overflow-wrap: break-word, quindi MDN raccomanda direttamente quest'ultimo per compatibilità migliore. overflow-wrap è anche il nome standard di quella che un tempo si chiamava word-wrap: i browser trattano word-wrap come un alias, ma la proprietà moderna è overflow-wrap.

Fonte: MDN Web Docs — «overflow-wrap»: word-break: break-word è deprecato, si comporta come overflow-wrap: break-word; overflow-wrap sostituisce il precedente word-wrap.

4. hyphens: la sillabazione automatica

hyphens: auto permette al browser di spezzare le parole con un trattino, seguendo le regole di sillabazione della lingua dichiarata sull'elemento: utile per giustificare il testo o per contenitori stretti, evitando spazi vuoti eccessivi tra le parole.

<style>
p { 
   hyphens: auto; 
}
</style>

<p lang="it">
   Questo testo usa la sillabazione automatica.
</p> 

Perché funzioni correttamente, l'elemento deve avere l'attributo lang impostato, proprio il tag visto nella pillola sulla struttura HTML5, che qui torna utile anche per la tipografia, non solo per l'accessibilità.

Fonte: MDN Web Docs — «Wrapping and breaking text»: hyphens permette la sillabazione automatica basata sulle regole della lingua dichiarata.

5. Il clamp multilinea: -webkit-line-clamp

Per troncare un testo dopo un numero preciso di righe (non solo una), la combinazione più diffusa resta -webkit-line-clamp , nata come proprietà non standard di WebKit, ma oggi supportata dalla maggior parte dei browser moderni.

.descrizione-card {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* tronca dopo 3 righe */
    overflow: hidden;
}

Questa tecnica è nata originariamente in WebKit e presenta alcune stranezze (per esempio su elementi <a>, il troncamento può avvenire anche a metà testo, non solo alla fine). Esiste una versione standardizzata line-clamp nella specifica CSS Overflow, ma per la compatibilità più ampia si continua a usare ancora la combinazione con prefisso.

Fonte: MDN Web Docs — «-webkit-line-clamp»: proprietà originariamente implementata in WebKit, con alcune limitazioni note (es. troncamento a metà testo sugli elementi <a>).

In sintesi

Nessuna proprietà risolve da sola l'esigenza: «il testo non ci sta»; ognuna gestisce una forma specifica del problema: una riga, una parola, una sillaba, un numero di righe e spesso vanno combinate insieme, non scelte una al posto dell'altra.