Text-align-last - Trucchi CSS

Anonim

text-align-lastti consente di controllare l'allineamento dell'ultima (o unica) riga di testo subito prima di un'interruzione di riga forzata, ad esempio la fine di un paragrafo o la riga subito prima di un
tag.

.intro-graph ( text-align-last: center; )

Al momento della stesura di questo documento, supportano solo i browser Mozilla e Internet Explorer text-align-last(con i prefissi del fornitore) e ciascuno ha un'implementazione leggermente diversa. La proprietà avrebbe dovuto iniziare a funzionare in Chrome 35, ma a partire da Chrome 40 richiede ancora il flag delle piattaforme web sperimentali. Maggiori dettagli sulle implementazioni del browser nei Punti di interesse.

Valori

  • left allinea l'ultima riga di testo a sinistra del contenitore.
  • rightallinea l'ultima riga di testo a destra del contenitore.
  • center centra l'ultima riga di testo all'interno del contenitore.
  • justify giustifica l'ultima riga di testo in modo che copra l'intera larghezza del contenitore, inserendo spazio tra le parole se necessario per aumentare la lunghezza della riga.
  • startallinea il testo all '“inizio” della riga sulla base directiondel testo - a sinistra per le lingue LTR, a destra per le lingue RTL.
  • endallinea l'ultima riga alla "fine" della riga in base alla parte directiondel testo: a destra per le lingue LTR, a sinistra per le lingue RTL.
  • autoil predefinito. Allinea l'ultima riga di testo in modo che corrisponda alla text-alignproprietà dell'elemento , se impostata. Se non è impostato, autoallinea il testo all'inizio.
  • inheritapplica la text-align-lastproprietà dell'elemento genitore.

Demo

Questa demo mostra i diversi text-align-lastvalori in azione. Nota: Internet Explorer non supporta i valori starto end.

Vedi Pen text-align-last di CSS-Tricks (@ css-tricks) su CodePen.

Punti di interesse

In Internet Explorer, text-align-lastfunziona solo quando il text-alignresto del testo nell'elemento selezionato è impostato su justify. Inoltre, IE non riconosce il valore starto end.

Nei browser Mozilla, text-align-lastfunzionerà sull'ultima riga prima di un'interruzione di riga forzata anche se non è specificato alcun allineamento per il resto del testo nell'elemento.

Vale anche la pena sapere che text-align-lastimposta l'allineamento per tutte le ultime righe all'interno dell'elemento selezionato, non solo per l'ultima riga di testo assoluta. Quindi, ad esempio, se hai un divcon cinque paragrafi in esso, la tua text-align-lastdichiarazione si applicherà all'ultima riga di ciascuno dei paragrafi.

Se vuoi usare text-align-lastsolo l'ultima riga del contenitore, potresti usare :last-childo :last-of-type. Il tuo CSS sarebbe simile a questo:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

Nella demo qui sotto, il lato sinistro mostra text-align-last: center;applicato a un div con più paragrafi al suo interno. Notare che l'ultima riga di ogni paragrafo è centrata. Il lato destro mostra text-align-last: center;applicato solo all'ultimo paragrafo all'interno del div utilizzando :last-child.

Vedi Pen text-align-last di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

  • text-align
  • indentatura del testo

Maggiori informazioni

  • text-align-last nel CSS Text Module Level 3 (W3C)
  • text-align-last in MDN
  • text-align-last su MSDN
  • text-align-last sul blog del team della piattaforma Web di Adobe
  • Webkit Bug 76173, riguardante l'implementazione di Chrome di text-align-last

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
35+ con flag sperimentali no 34+ (prefisso) no 5.5+ (prefisso) no no