Text-align-last - CSS-temppuja

Anonim

text-align-lastvoit hallita viimeisen (tai ainoan) tekstirivin tasausta juuri ennen pakotettua rivinvaihtoa - esimerkiksi kappaleen loppua tai riviä suoraan
tagin edessä.

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

Tämän kirjoituksen aikaan vain Mozilla-selaimet ja Internet Explorer tukevat text-align-last(toimittajan etuliitteillä), ja kullakin on hieman erilainen toteutus. Ominaisuuden piti alkaa toimia Chrome 35: ssä, mutta Chrome 40: stä lähtien se vaatii silti kokeellisen web-alustan lipun. Lisätietoja selaimen toteutuksista kohdepisteissä.

Arvot

  • left tasaa tekstin viimeisen rivin säilön vasemmalle puolelle.
  • righttasaa tekstin viimeisen rivin säilön oikealle puolelle.
  • center keskittää viimeisen tekstirivin säilöön.
  • justify perustelee tekstin viimeisen rivin, jotta se ulottuu koko säilön leveydelle, lisäämällä tilaa sanojen väliin tarvittaessa rivin pituuden lisäämiseksi.
  • starttasaa tekstin rivin "alkuun" directiontekstin perusteella - vasemmalle LTR-kielille, oikealle RTL-kielille.
  • endtasaa viimeisen rivin rivin "loppuun" directiontekstin perusteella - oikea LTR-kielille, vasemmalle RTL-kielille.
  • autooletusarvo. Tasaa tekstin viimeisen rivin vastaamaan elementin text-alignominaisuutta, jos se on asetettu. Jos sitä ei ole asetettu, autotasaa teksti alkuun.
  • inheritkäyttää text-align-lastylätason elementin ominaisuutta.

Demo

Tämä esittely näyttää eri text-align-lastarvot toiminnassa. Huomautus: Internet Explorer ei tue starttai end-arvoja.

Katso CSS-Tricksin kynä text-align-last (@ css-tricks) CodePenistä.

Kiinnostavat paikat

Internet Explorerissa text-align-lasttoimii vain, kun text-alignvalitun elementin loput tekstistä on asetettu justify. Myös IE ei tunnista starteikä endarvosta.

Toimii Mozilla-selaimissa text-align-lastviimeisellä rivillä ennen pakotettua rivinvaihtoa, vaikka elementin muulle tekstille ei ole määritetty kohdistusta.

On myös syytä tietää, että text-align-lastasetetaan tasaus kaikille valitun elementin viimeisille riveille, ei vain viimeiselle tekstiriville. Joten jos sinulla on esimerkiksi divviisi kappaletta, text-align-lastilmoitustasi sovelletaan kunkin kappaleen viimeiseen riviin.

Jos haluat käyttää text-align-lastvain säiliön viimeisellä rivillä, voit ehkä käyttää :last-childtai :last-of-type. CSS: si näyttäisi tältä:

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

Alla olevassa esittelyssä vasen puoli näyttää text-align-last: center;sovelluksen div: iin, jonka sisällä on useita kappaleita. Huomaa, että jokaisen kappaleen viimeinen rivi on keskitetty. Oikea puoli näyttää text-align-last: center;vain div: n viimeisen kappaleen :last-child.

Katso CSS-Tricksin kynä text-align-last (@ css-tricks) CodePenistä.

Liittyvät

  • tekstin tasaus
  • teksti-luetelmakohta

Lisää tietoa

  • text-align-last CSS-tekstimoduulissa, taso 3 (W3C)
  • text-align-last MDN: ssä
  • text-align-last MSDN: ssä
  • text-align-last Adoben verkkosivustotiimin blogissa
  • Webkit Bug 76173, liittyen Chromen käyttöönottoon text-align-last

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
35+ kokeellisilla lipuilla Ei 34+ (etuliite) Ei 5.5+ (etuliite) Ei Ei