Word-break - Trucchi CSS | CSS Almanac 2025

La word-breakproprietà in CSS può essere utilizzata per cambiare quando devono verificarsi interruzioni di riga. Normalmente, le interruzioni di riga nel testo possono verificarsi solo in determinati spazi, come quando è presente uno spazio o un trattino.

Nell'esempio seguente possiamo invece creare le word-breaklettere tra:

p ( word-break: break-all; )

Se quindi impostiamo la larghezza del testo su uno em, la parola si interromperà per ogni lettera:

Vedi il testo di impostazione della penna verticalmente con interruzione di parola di CSS-Tricks (@ css-tricks) su CodePen.

Questo valore viene spesso utilizzato in luoghi con contenuto generato dagli utenti in modo che le stringhe lunghe non rischino di rompere il layout. Un esempio molto comune è una copia lunga e un URL incollato. Se l'URL non ha trattini, può estendersi oltre la casella principale e avere un aspetto brutto o peggio, causare problemi di layout.

Vedi i collegamenti di correzione della penna con interruzione di parola di CSS-Tricks (@ css-tricks) su CodePen.

Valori

normal: utilizza le regole predefinite per interrompere le parole.
break-all: qualsiasi parola / lettera può passare alla riga successiva.
keep-all: per i testi in cinese, giapponese e coreano le parole non sono rotte. Altrimenti questo è lo stesso di normal.

Questa proprietà è spesso utilizzata anche in combinazione con la proprietà trattini in modo che quando si verificano interruzioni viene inserito un trattino, come da standard nei libri.

L'utilizzo completo, con i prefissi del fornitore necessari, è:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

L'utilizzo di queste proprietà sul selettore universale può essere utile se si dispone di un sito con molti contenuti generati dagli utenti. Sebbene sia giusto avvertimento, può sembrare strano sui titoli e sul testo preformattato (

Relazionato

overflow-wrap
trattini
spazio bianco
Gestione di parole lunghe e URL

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.