CSS text-justify
La proprietà CSS3 text-justify controlla il metodo di giustificazione del testo
La proprietà text-justify viene utilizzata per determinare come il testo giustificato (tramite text-align: justify) dovrebbe distribuire lo spazio. Permette di scegliere se aumentare lo spazio tra le parole (inter-word) o tra i caratteri (inter-character), utile in diversi contesti linguistici e tipografici.
Sintassi
Significato dei valori principali:
-
auto: Usa il metodo di giustificazione predefinito del browser (di solito
inter-word). -
inter-word: Giustifica aumentando lo spazio tra le parole. È il valore più comune e leggibile.
-
inter-character: Giustifica aumentando lo spazio tra i caratteri. Utile per lingue asiatiche.
-
none: Disattiva qualsiasi giustificazione specifica e lascia il comportamento di default.
Esempio proprietà: text-justify
Codice Esempio: text-justify
.justify-example {
width: 80%;
margin: auto;
max-width: 600px;
font-size: 18px;
line-height: 1.6;
text-align: justify;
border: 1px solid #ccc;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}.inter-word {
text-justify: inter-word;
}.inter-character {
text-justify: inter-character;
}
Contenuto Esempio: text-justify
Esempio di utilizzo di text-justify
In questo esempio, la proprietà text-justify modifica il comportamento della giustificazione del testo:
text-justify: inter-word. Il testo viene giustificato distribuendo lo spazio tra le parole. È il comportamento predefinito e fornisce una lettura fluida nei testi lunghi.
text-justify: inter-character. Il testo viene giustificato distribuendo lo spazio tra i singoli caratteri, utile per lingue non latine ma può apparire innaturale in italiano.
CSS e HTML per text-justify:
<style>
.justify-example {
width: 80%;
margin: auto;
max-width: 600px;
font-size: 18px;
line-height: 1.6;
text-align: justify;
border: 1px solid #ccc;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.inter-word {
text-justify: inter-word;
}
.inter-character {
text-justify: inter-character;
}
</style>
<div class="justify-example inter-word">
Testo giustificato tra parole.
</div>
<div class="justify-example inter-character">
Testo giustificato tra caratteri.
</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
