9.1 Proprietà text-indent
Le proprietà dei paragrafi in CSS svolgono un ruolo chiave nella gestione della formattazione del testo, garantendo leggibilità e attrattiva estetica. Tra di esse, text-indent e text-align-last sono strumenti importanti per impostare rientri e allineamento dell'ultima riga del testo in un paragrafo.
La proprietà text-indent gestisce il rientro della prima riga di testo all'interno di un elemento blocco. È spesso usata per creare rientri all'inizio dei paragrafi, migliorando la leggibilità e la struttura del testo.
Valori:
- Valori assoluti: valori in unità fisse come pixel (
px), punti (pt), centimetri (cm), ecc. Ad esempio,text-indent: 20px; - Valori percentuali: valori in percentuale della larghezza del blocco contenitore. Ad esempio,
text-indent: 5%; - Valori negativi: i rientri possono essere negativi, il che porta l'allineamento del testo a sinistra oltre i bordi del contenitore. Ad esempio,
text-indent: -20px;
Esempio di utilizzo:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Questo è un paragrafo con un rientro della prima riga di 20 pixel.</p>
<p class="indent-5percent">Questo è un paragrafo con un rientro della prima riga del 5% della larghezza del blocco.</p>
<p class="indent-negative">Questo è un paragrafo con un rientro negativo della prima riga di 20 pixel.</p>
</body>
9.2 Proprietà text-align-last
La proprietà text-align-last controlla l'allineamento dell'ultima riga di testo all'interno di un elemento blocco. È utile per ottenere un allineamento coerente nei paragrafi, specialmente quando il testo è giustificato (justify).
Valori:
auto: l'ultima riga è allineata come il testo normale (valore predefinito)left: l'ultima riga è allineata a sinistraright: l'ultima riga è allineata a destracenter: l'ultima riga è centratajustify: l'ultima riga è giustificata come le altre righe del paragrafo
Esempio di utilizzo:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Questo è un paragrafo con allineamento del testo giustificato e l'ultima riga allineata a sinistra.</p>
<p class="justify-right">Questo è un paragrafo con allineamento del testo giustificato e l'ultima riga allineata a destra.</p>
<p class="justify-center">Questo è un paragrafo con allineamento del testo giustificato e l'ultima riga centrata.</p>
<p class="justify-justify">Questo è un paragrafo con allineamento del testo e l'ultima riga giustificati.</p>
</body>
9.3 Uso combinato delle proprietà
Le proprietà text-indent e text-align-last possono essere utilizzate insieme per creare una formattazione dei paragrafi più complessa, migliorando la leggibilità e la struttura visiva del testo.
Esempio di HTML e CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Questo paragrafo ha un rientro della prima riga di 30 pixel, testo giustificato e l'ultima riga allineata a destra.
Questo dimostra l'uso combinato delle proprietà text-indent e text-align-last per ottenere l'effetto di formattazione desiderato.
</p>
</body>
Spiegazione del codice:
text-indent: 30px;: imposta il rientro della prima riga di testo a 30 pixeltext-align: justify;: allinea il testo alla larghezza del contenitoretext-align-last: right;: allinea l'ultima riga di testo a destrawidth: 300px;: imposta la larghezza del contenitore per il testoborder: 1px solid #000;: aggiunge un bordo intorno al contenitore del testopadding: 10px;: imposta i margini interni del contenitore
GO TO FULL VERSION