Text-align-last - CSS-trikid

Anonim

text-align-lastvõimaldab teil kontrollida viimase (või ainsa) tekstirea joondamist vahetult enne sunnitud reavahetust - näiteks lõigu lõpp või rida otse
sildi ees.

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

Selle kirjutamise ajal toetavad ainult Mozilla brauserid ja Internet Explorer text-align-last(koos müüja eesliidetega) ning mõlemal on veidi erinev teostus. See vara pidi hakkama töötama Chrome 35-s, kuid alates Chrome 40-st nõuab see siiski eksperimentaalsete veebiplatvormide lippu. Täpsem teave brauseri juurutamise kohta huvipunktides.

Väärtused

  • left joondab viimase tekstirea konteinerist vasakule.
  • rightjoondab teksti viimase rea konteinerist paremale.
  • center koondab konteineris viimase tekstirea.
  • justify põhjendab teksti viimast rida, nii et see ulatub kogu konteineri laiusesse, lisades vajadusel rea pikkuse suurendamiseks sõnade vahele ruumi.
  • startjoondab teksti rea algusega directionteksti põhjal - vasak LTR-keelte jaoks, RTL-keelte jaoks paremaks.
  • endjoondab viimase rea rea ​​lõppu directionteksti põhjal - LTR-keelte jaoks parem, RTL-keelte jaoks vasak.
  • autovaikimisi. Joondab teksti viimase rea, et see vastaks elemendi text-alignatribuudile, kui see on määratud. Kui see pole määratud, autojoondab tekst alguse.
  • inheritrakendab vanemelemendi text-align-lastomadust.

Demo

See demo näitab erinevaid text-align-lastväärtusi tegevuses. Märkus. Internet Explorer ei toeta väärtusi startvõi end.

Vaadake CodePeni saidil CSS-Tricks (@ css-tricks) kirjutatud teksti pliiatsit-viimane-viimane.

Huvipunktid

Internet Exploreris text-align-lasttöötab ainult siis text-align, kui valitud elemendi ülejäänud tekst on seatud väärtusele justify. Samuti ei tunne IE väärtust startega endväärtust ära.

Töötab Mozilla brauserites text-align-lastviimasel real enne sunnitud reavahetust, isegi kui elemendi ülejäänud tekstile pole joondust määratud.

Samuti tasub teada, et see text-align-lastseab joondamise kõigile valitud elemendi viimastele ridadele, mitte ainult absoluutsele tekstireale. Nii et kui teil on divnäiteks viie lõikega punkt, kehtib teie text-align-lastdeklaratsioon iga lõigu viimasele reale.

Kui soovite kasutada text-align-lastainult konteineri kõige viimasel real, võite kasutada :last-childvõi :last-of-type. Teie CSS näeks välja umbes selline:

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

Allpool olevas demos kuvatakse vasakul küljel text-align-last: center;rakendatud div-le, mille sees on mitu lõiku. Pange tähele, et iga lõigu viimane rida on keskel. Paremal küljel näidatakse text-align-last: center;ainult div-i viimase lõigu kohta, kasutades :last-child.

Vaadake CodePeni saidil CSS-Tricks (@ css-tricks) kirjutatud teksti pliiatsit-viimane-viimane.

Seotud

  • teksti joondamine
  • teksti taane

Rohkem informatsiooni

  • text-align-last CSS-i tekstimooduli 3. tasemel (W3C)
  • text-align-last MDN-is
  • text-align-last MSDN-is
  • text-align-last Adobe veebiplatvormi meeskonna ajaveebis
  • Veebikomplekti viga 76173 Chrome'i rakenduse kohta text-align-last

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
35+ eksperimentaalsete lippudega Ei 34+ (eesliitega) Ei 5,5+ (eesliitega) Ei Ei