Attraverso il linguaggio CSS, è possibile modificare lo spazio del testo. Ad esempio, possiamo aumentare lo spazio tra le lettere, tra le righe o tra le parole.
In questa lezione, vediamo le seguenti proprietà:
| Proprietà | Descrizione |
text-indent | Imposta una spaziatura prima dell'inizio del testo. |
letter-spacing | Imposta lo spazio tra i caratteri di un testo. |
line-height | Imposta l'altezza della linea per il testo. |
word-spacing | Imposta lo spazio tra le parole in un testo. |
white-space | Specifica come gli spazi all'interno di un testo devono essere gestiti. |
Vediamo le proprietà in dettaglio.
La proprietà text-indent permette di aggiungere uno spazio specificato prima dell'inizio di un testo.
<p>Il termine SEO sta per "Ottimizzazione per i Motori di Ricerca". In poche parole,
scrivere in ottica SEO significa utilizzare una serie di strategie per migliorare
la visibilità dei tuoi contenuti online - Da Biadets Blog</p>
<style>
p {
text-indent: 40px;
}
</style>Si può utilizzare anche un valore negativo (ad esempio, -20px). In questo caso, il testo inizierà prima della normale posizione iniziale.
La proprietà letter-spacing permette di specificare lo spazio tra le lettere all'interno di un testo.
Il valore predefinito è normal. Un maggiore spazio tra i caratteri può aumentare anche la leggibilità del testo. Proprio per questo motivo, uno spazio troppo stretto è sconsigliato.
<p>Il termine SEO sta per "Ottimizzazione per i Motori di Ricerca". In poche parole,
scrivere in ottica SEO significa utilizzare una serie di strategie per migliorare
la visibilità dei tuoi contenuti online - Da Biadets Blog</p>
<style>
p {
letter-spacing: 3px; /* Ogni lettera ha uno spazio di 3px */
}
</style>Questa proprietà accetta valori negativi (come -2px). Se usati, le lettere si posizioneranno una sopra l'altra.
La proprietà line-height specifica la distanza tra le righe di un testo.
I valori da utilizzare possono essere diversi:
line-height: normal, che corrisponde allo spazio predefinito.line-height: numero, per specificare il numero di volte a cui deve corrispondere lo spazio rispetto alla dimensione del testo. Ad esempio, un valore di 1.5 significa che l'altezza della linea sarà 1.5 volte la dimensione del carattere.line-height: numero assoluto, per specificare uno spazio costante tra le righe. Ad esempio, un valore di 20px significa che lo spazio tra le righe sarà di 20px.line-height: percentuale, per specificare l'altezza della linea come percentuale della dimensione del carattere dell'elemento. Ad esempio, un valore di 150% significa che l'altezza della linea sarà 1.5 volte la dimensione del carattere.Vediamo un esempio:
<p>Il termine SEO sta per "Ottimizzazione per i Motori di Ricerca". In poche parole, <br>
scrivere in ottica SEO significa utilizzare una serie di strategie per migliorare <br>
la visibilità dei tuoi contenuti online - Da Biadets Blog</p>
<style>
p {
line-height: 2; /* Ogni riga ha uno spazio doppio rispetto al testo */
}
</style>In questo caso, non è possibile utilizzare valori negativi (come -2 o -20px). La proprietà line-height accetta soltanto valori maggiori di 0.
La proprietà word-spacing specifica lo spazio tra le parole in un testo.
<p>Il termine SEO sta per "Ottimizzazione per i Motori di Ricerca" - Da Biadets Blog </p>
<style>
p {
word-spacing: 20px; /* Ogni parola ha uno spazio di 20px */
}
</style>La proprietà word-spacing accetta valori negativi (come -20px). Se usati, le parole si posizioneranno una sopra l'altra.
La proprietà white-space specifica come il testo bianco (spazi, tabulazioni, nuove righe) viene gestito all'interno di un elemento. Ad esempio, è possibile evitare che il testo vada a capo.
Con white-space, possiamo usare questi valori: normal, nowrap, pre, pre-wrap, pre-line.
Questo è il valore predefinito. Con white-space:normal:
<p>
Questo è un esempio di testo
con spazi bianchi extra che
verranno ignorati.
</p>
<style>
p {
white-space: normal;
}
</style>Con white-space: nowrap, ecco cosa succede:
<p>
Questo è un esempio di testo in cui tutta la frase rimarrà su una singola riga senza andare a capo.
</p>
<style>
p {
white-space: nowrap;
}
</style>Con white-space: pre, nel testo:
In questo caso, il testo apparirà esattamente come lo scrivi.
<p>
Questo è un esempio di testo
con spazi bianchi extra e righe che
verranno mantenuti.
</p>
<style>
p {
white-space: pre;
}
</style>I valori pre-wrap e pre-line sono una via di mezzo rispetto al semplice white-space: pre. Entrambi mantengono le nuove righe del testo, ma hanno alcune differenze.
Con white-space: pre-wrap, gli spazi bianchi extra vengono mantenuti e il testo andrà a capo automaticamente se necessario.
Con white-space: pre-line, gli spazi bianchi extra vengono ignorati e il testo andrà a capo automaticamente se necessario.
Vediamo un esempio con pre-wrap:
<p>
Questo è un esempio di testo
con spazi bianchi extra e righe.
</p>
<style>
p {
white-space: pre-wrap; /* Spazi extra mantenuti */
}
</style>Vediamo un esempio con pre-line:
<p>
Questo è un esempio di testo
con spazi bianchi extra e righe.
</p>
<style>
p {
white-space: pre-line; /* Spazi extra ignorati */
}
</style>