CSS word-break
La proprietà CSS word-break (CSS3) controlla la divisione delle parole
La proprietà word-break definisce come le parole possono essere spezzate o interrotte a capo per migliorare la gestione del testo e prevenire overflow. Valori come break-all e keep-all sono particolarmente utili in lingue diverse o con testi lunghi senza spazi.
Sintassi
Significato dei valori principali:
normal: Il comportamento di default. Le parole si spezzano solo in punti normali di interruzione (es. spazi o trattini).
break-all: Permette la divisione delle parole ovunque necessario per evitare overflow, anche spezzando all’interno della parola.
keep-all: Utilizzato principalmente per testi in cinese, giapponese e coreano, impedisce la divisione delle parole.
break-word: (Non standard, ma supportato) Forza l’interruzione della parola se necessario, comportandosi simile a
break-allma con alcune differenze di priorità.
Esempio proprietà: word-break
Codice Esempio: word-break
.container {
width: 300px;
border: 2px solid #333;
padding: 15px;
margin-bottom: 20px;
font-family: Arial, sans-serif;
}.normal-break {
word-break: normal;
background-color: #4a90e2;
color: white;
padding: 10px;
margin-bottom: 10px;
}.break-all {
word-break: break-all;
background-color: #50a14f;
color: white;
padding: 10px;
}
Contenuto Esempio: word-break
Esempio di utilizzo di word-break
In questo esempio si mostra l’effetto di word-break impostato su normal e break-all su testi con parole lunghe senza spazi:
Questoèunaparolalongasenzaspazichedimostrailcomportamentodiword-breaknormal.
Questoèunaparolalongasenzaspazichedimostrailcomportamentodibreak-all.
CSS e HTML per l'esempio di word-break:
<style>
.container {
width: 300px;
border: 2px solid #333;
padding: 15px;
margin-bottom: 20px;
font-family: Arial, sans-serif;
}
.normal-break {
word-break: normal;
background-color: #4a90e2;
color: white;
padding: 10px;
margin-bottom: 10px;
}
.break-all {
word-break: break-all;
background-color: #50a14f;
color: white;
padding: 10px;
}
</style>
<div class="container normal-break">
<strong>word-break: normal;</strong><br>
Questoèunaparolalongasenzaspazichedimostrailcomportamentodiword-breaknormal.
</div>
<div class="container break-all">
<strong>word-break: break-all;</strong><br>
Questoèunaparolalongasenzaspazichedimostrailcomportamentodibreak-all.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 18.97.14.88
