CSS overflow-wrap
La proprietà CSS overflow-wrap in CSS3 forza l’andata a capo delle parole lunghe
La proprietà overflow-wrap, introdotta con CSS3, consente al browser di spezzare le parole lunghe per evitare che trabocchino fuori dal contenitore. È particolarmente utile per garantire un layout stabile e leggibile nei dispositivi mobili o contenitori stretti.
Sintassi
Significato dei valori principali:
-
normal: (valore predefinito) le parole lunghe non vengono spezzate automaticamente, anche se causano overflow del contenitore.
-
break-word: forza la rottura delle parole molto lunghe per impedire l’overflow e mantenere il testo all'interno del contenitore.
Esempio proprietà: overflow-wrap
Codice Esempio: overflow-wrap
.text-container {
width: 250px;
border: 2px solid #aaa;
padding: 10px;
overflow-wrap: break-word;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
font-size: 16px;
}
Contenuto Esempio: overflow-wrap
Esempio di utilizzo di overflow-wrap
Nel seguente esempio, la proprietà overflow-wrap impedisce che una parola lunga causi overflow fuori dal contenitore:
CSS e HTML per un contenitore con overflow-wrap: break-word:
<style>
.text-container {
width: 250px;
border: 2px solid #aaa;
padding: 10px;
overflow-wrap: break-word;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
<div class="text-container">
Questa è una parola lunghissimissimissimissimissima_che_di_solito_causerebbe_overflow se non venisse spezzata.
</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: 216.73.216.108
