Text-align-last - CSS-triki

Anonim

text-align-lastļauj kontrolēt pēdējās (vai vienīgās) teksta rindas izlīdzināšanu tieši pirms piespiedu rindas pārtraukuma, piemēram, rindkopas beigas vai rindu tieši pirms
taga.

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

Šīs rakstīšanas laikā atbalsta tikai Mozilla pārlūkprogrammas un Internet Explorer text-align-last(ar piegādātāja prefiksiem), un katram no tiem ir nedaudz atšķirīga ieviešana. Paredzēts, ka īpašumam vajadzētu sākt darboties pārlūkā Chrome 35, taču, sākot no pārlūka Chrome 40, tam joprojām ir nepieciešams eksperimentālo tīmekļa platformu karogs. Sīkāka informācija par pārlūkprogrammas ieviešanu interesējošajos punktos.

Vērtības

  • left izlīdzina teksta pēdējo rindiņu pa kreisi no konteinera.
  • rightizlīdzina teksta pēdējo rindiņu pa labi no konteinera.
  • center centrē konteinera pēdējo teksta rindiņu.
  • justify attaisno pēdējo teksta rindiņu, lai tā aptvertu visu konteinera platumu, ievietojot atstarpi starp vārdiem, ja nepieciešams, lai palielinātu līnijas garumu.
  • startizlīdzina tekstu līnijas “sākumam”, pamatojoties uz directionteksta tekstu - pa kreisi - LTR valodām, pa labi - RTL valodām.
  • endizlīdzina pēdējo rindu ar rindas “beigām”, pamatojoties uz directiontekstu - pa labi LTR valodām, pa kreisi RTL valodām.
  • autonoklusējums. Pielīdzina pēdējās teksta rindas, lai tā atbilstu elementa text-alignrekvizītam, ja tas ir iestatīts. Ja tas nav iestatīts, autopielīdziniet tekstu sākumam.
  • inheritpielieto text-align-lastvecāka elementa rekvizītu.

Demonstrācija

Šajā demonstrācijā tiek rādītas dažādas text-align-lastvērtības darbībā. Piezīme. Internet Explorer neatbalsta startvai endvērtības.

Vietnē CodePen skatiet CSS-Tricks (@ css-tricks) pildspalvas tekstu-align-last.

Apskates vietas

Pārlūkprogrammā Internet Explorer text-align-lastdarbojas tikai tad text-align, ja pārējā atlasītā elementa teksta daļa ir iestatīta uz justify. Arī IE neatpazīst startvai endvērtību.

Pārlūkprogrammās Mozilla text-align-lastdarbosies pēdējā rindā pirms piespiedu rindas pārtraukuma, pat ja elementa tekstam nav norādīts izlīdzinājums.

Ir arī vērts zināt, ka tiek text-align-lastiestatīta izlīdzināšana visām izvēlētā elementa pēdējām rindām, ne tikai absolūtai pēdējai teksta rindiņai. Tā, piemēram, ja tajā ir a divar piecām rindkopām, jūsu text-align-lastdeklarācija tiks piemērota katras rindkopas pēdējai rindai.

Ja vēlaties izmantot text-align-lasttikai pēdējā konteinera rindā, iespējams, varēsit izmantot :last-childvai :last-of-type. Jūsu CSS izskatīsies apmēram šādi:

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

Zemāk esošajā demonstrācijā kreisajā pusē redzams, kas text-align-last: center;piemērots div, kura iekšpusē ir vairāki punkti. Ievērojiet, ka katras rindkopas pēdējā rinda ir centrēta. Labajā pusē parādīti text-align-last: center;tikai pēdējie paragrāfi div iekšpusē, izmantojot :last-child.

Vietnē CodePen skatiet CSS-Tricks (@ css-tricks) pildspalvas tekstu-align-last.

Saistīts

  • izlīdzināt tekstu
  • teksta ievilkums

Vairāk informācijas

  • text-align-last CSS teksta moduļa 3. līmenī (W3C)
  • text-align-last MDN
  • text-align-last MSDN
  • text-align-last Adobe tīmekļa platformas komandas emuārā
  • Webkit Bug 76173 par Chrome ieviešanu text-align-last

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
35+ ar eksperimentāliem karodziņiem Nē 34+ (prefikss) Nē 5.5+ (ar prefiksu) Nē Nē