Text-align-last - CSS-trikovi

Anonim

text-align-lastomogućuje vam kontrolu poravnanja zadnjeg (ili jedinog) retka teksta neposredno prije prisilnog prekida retka - na primjer kraj odlomka ili redak točno ispred
oznake.

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

U vrijeme pisanja ovog teksta podržavaju samo Mozilla preglednici i Internet Explorer text-align-last(s prefiksima dobavljača), a svaki ima malo drugačiju implementaciju. Vlasništvo je trebalo početi raditi u Chromeu 35, ali od Chrome 40 i dalje zahtijeva eksperimentalnu zastavu web platformi. Više detalja o implementacijama preglednika u Zanimljivosti.

Vrijednosti

  • left poravnava posljednji redak teksta lijevo od spremnika.
  • rightporavnava posljednji redak teksta s desne strane spremnika.
  • center centrira zadnji redak teksta unutar spremnika.
  • justify opravdava posljednji redak teksta tako da se proteže cijelom širinom spremnika, umetajući razmak između riječi ako je potrebno za povećanje duljine retka.
  • startporavnava tekst s "početkom" retka na temelju directionteksta: lijevo za jezike LTR, desno za jezike RTL.
  • endporavnava posljednji redak s "krajem" retka na temelju directionteksta - desno za jezike LTR, lijevo za jezike RTL.
  • autozadani. Poravnava posljednji redak teksta tako da odgovara text-alignsvojstvu elementa ako je postavljeno. Ako nije postavljen, autoporavnava tekst na početak.
  • inheritprimjenjuje text-align-lastsvojstvo nadređenog elementa.

Demo

Ovaj demo pokazuje različite text-align-lastvrijednosti na djelu. Napomena: Internet Explorer ne podržava startili endvrijednosti.

Pogledajte olovku text-align-last by CSS-Tricks (@ css-tricks) na CodePenu.

Točke interesa

U Internet Exploreru text-align-lastradi samo kada je text-alignostatak teksta u odabranom elementu postavljen na justify. Također, IE ne prepoznaju startili endvrijednost.

U preglednicima Mozilla, text-align-lastradit će na zadnjem retku prije prisilnog prekida retka, čak i ako u elementu nije navedeno poravnanje za ostatak teksta.

Također je vrijedno znati da text-align-lastpostavlja poravnanje za sve posljednje retke unutar odabranog elementa, a ne samo za apsolutni zadnji redak teksta. Tako, na primjer, ako imate divpet paragrafa, vaša text-align-lastće se izjava odnositi na zadnji redak svakog od paragrafa.

Ako želite koristiti text-align-lastsamo na posljednjem retku u spremniku, možda ćete moći koristiti :last-childili :last-of-type. Vaš CSS izgledao bi otprilike ovako:

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

U demonstraciji ispod, lijeva strana prikazuje text-align-last: center;primjenu na div s više odlomaka u njemu. Primijetite da je zadnji redak svakog odlomka centriran. Desna strana pokazuje text-align-last: center;primijenjeno samo na zadnji odlomak unutar div-a :last-child.

Pogledajte olovku text-align-last by CSS-Tricks (@ css-tricks) na CodePenu.

Povezano

  • poravnanje teksta
  • uvlaka teksta

Više informacija

  • text-align-last u CSS Tekstualnom modulu razina 3 (W3C)
  • text-align-last na MDN
  • text-align-last na MSDN-u
  • text-align-last na blogu tima Adobe web platforme
  • Webkit Bug 76173, u vezi s Chromeovom implementacijom text-align-last

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
35+ s eksperimentalnim zastavicama Ne 34+ (prefiks) Ne 5,5+ (s prefiksom) Ne Ne