CSS word-wrap
La proprietà CSS word-wrap (CSS3) gestisce l’andata a capo delle parole lunghe
La proprietà word-wrap consente di controllare se una parola lunga può essere spezzata e portata a capo per evitare che trabocchi dal contenitore, migliorando così l’adattabilità del layout.
Sintassi
Significato dei valori principali:
normal: Il comportamento di default, non spezza le parole lunghe; il testo può traboccare dal contenitore.
break-word: Permette di spezzare le parole lunghe per andare a capo e prevenire overflow orizzontali.
inherit: L’elemento eredita il valore della proprietà dal genitore.
Esempio proprietà: word-wrap
Codice Esempio: word-wrap
.container {
width: 300px;
border: 2px solid #333;
padding: 15px;
margin-bottom: 20px;
font-family: Arial, sans-serif;
}.normal-wrap {
word-wrap: normal;
background-color: #e74c3c;
color: white;
padding: 10px;
margin-bottom: 10px;
}.break-word-wrap {
word-wrap: break-word;
background-color: #27ae60;
color: white;
padding: 10px;
}
Contenuto Esempio: word-wrap
Esempio di utilizzo di word-wrap
In questo esempio, un testo con una parola molto lunga viene gestito con word-wrap: normal e word-wrap: break-word:
Supercalifragilistichespiralidosoèunaparolalungaesenzainterruzioni.
Supercalifragilistichespiralidosoèunaparolalungaesenzainterruzioni.
CSS e HTML per l'esempio di word-wrap:
<style>
.container {
width: 300px;
border: 2px solid #333;
padding: 15px;
margin-bottom: 20px;
font-family: Arial, sans-serif;
}
.normal-wrap {
word-wrap: normal;
background-color: #e74c3c;
color: white;
padding: 10px;
margin-bottom: 10px;
}
.break-word-wrap {
word-wrap: break-word;
background-color: #27ae60;
color: white;
padding: 10px;
}
</style>
<div class="container normal-wrap">
<strong>word-wrap: normal;</strong><br>
Supercalifragilistichespiralidosoèunaparolalungaesenzainterruzioni.
</div>
<div class="container break-word-wrap">
<strong>word-wrap: break-word;</strong><br>
Supercalifragilistichespiralidosoèunaparolalungaesenzainterruzioni.
</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.118
