CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

text-align-last: auto | left | right | center | justify | start | end;

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

CODE: CSSpreleva codice
  1. .justify-default {
  2.   width: 350px;
  3.   text-align: justify;
  4.   background-color: #fdf6e3;
  5.   padding: 10px;
  6.   margin-bottom: 10px;
  7.   border-left: 4px solid #e06c75;
  8. }
  9.  
  10. .justify-last-center {
  11.   width: 350px;
  12.   text-align: justify;
  13.   text-align-last: center;
  14.   background-color: #fdf6e3;
  15.   padding: 10px;
  16.   margin-bottom: 10px;
  17.   border-left: 4px solid #61afef;
  18. }

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:


Questo paragrafo è giustificato e l'ultima riga rimane allineata a sinistra, secondo il comportamento predefinito del browser.
Questo paragrafo è giustificato, ma l'ultima riga è centrata grazie alla proprietà 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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies