CSS text-align-last
La proprietà CSS3 text-align-last controlla l’allineamento dell’ultima riga di testo
La proprietà text-align-last permette di specificare un allineamento orizzontale diverso solo per l’ultima riga di un blocco di testo. È particolarmente utile insieme a text-align: justify per ottenere una resa più armoniosa dell’ultimo rigo di un paragrafo.
Sintassi
Significato dei valori principali:
auto: Usa lo stesso valore specificato in
text-align.left: Allinea l'ultima riga a sinistra.
right: Allinea l'ultima riga a destra.
center: Centra l'ultima riga del paragrafo.
justify: Giustifica anche l’ultima riga, se possibile.
start / end: Allinea in base alla direzione del contenuto (utili in testi RTL o LTR).
Esempio proprietà: text-align-last
Codice Esempio: text-align-last
.justify-default {
width: 350px;
text-align: justify;
background-color: #fdf6e3;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #e06c75;
}.justify-last-center {
width: 350px;
text-align: justify;
text-align-last: center;
background-color: #fdf6e3;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #61afef;
}
Contenuto Esempio: text-align-last
Esempio di utilizzo della proprietà text-align-last
Nel seguente esempio, due paragrafi hanno text-align: justify, ma l’ultimo riga è allineata diversamente grazie a text-align-last:
text-align-last: center.
HTML e CSS completo per l'esempio:
<style>
.justify-default {
width: 350px;
text-align: justify;
background-color: #fdf6e3;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #e06c75;
}
.justify-last-center {
width: 350px;
text-align: justify;
text-align-last: center;
background-color: #fdf6e3;
padding: 10px;
margin-bottom: 10px;
border-left: 4px solid #61afef;
}
</style>
<div class="justify-default">
Questo paragrafo è giustificato e l'ultima riga rimane allineata a sinistra, secondo il comportamento predefinito del browser.
</div>
<div class="justify-last-center">
Questo paragrafo è giustificato, ma l'ultima riga è centrata grazie alla proprietà <code>text-align-last: center</code>.
</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.192
