Text-align-last - CSS-trükkök

Anonim

text-align-lastlehetővé teszi az utolsó (vagy egyetlen) szövegsor igazítását közvetlenül a kényszerített sortörés előtt - például egy bekezdés végét vagy közvetlenül a
címke előtti sort .

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

Az írás idején csak a Mozilla böngészők és az Internet Explorer támogatják text-align-last(szállító előtagokkal), és mindegyik kissé eltérő megvalósítással rendelkezik. Az ingatlan állítólag a Chrome 35-ben kezdett el dolgozni, de a Chrome 40-től kezdve még mindig szükség van a kísérleti webplatformok megjelölésére. További részletek a böngésző megvalósításáról az érdekes helyeken.

Értékek

  • left a szöveg utolsó sorát a tároló bal oldalához igazítja.
  • righta szöveg utolsó sorát a tárolótól jobbra igazítja.
  • center középre helyezi az utolsó szövegsort a tárolóban.
  • justify igazolja a szöveg utolsó sorát, így az a tároló teljes szélességét lefedi, szóközöket beszúrva a szavak közé, ha szükséges a sor hosszának növeléséhez.
  • starta szöveget a sor kezdetéhez igazítja a szöveg alapján direction- balra az LTR nyelveknél, jobbra az RTL nyelvekhez.
  • endaz utolsó sort a sor végéhez igazítja a directionszöveg alapján - jobbra az LTR nyelveknél, balra az RTL nyelvekhez.
  • autoaz alapértelmezett. A szöveg utolsó sorát igazítja az elem text-aligntulajdonságához, ha be van állítva. Ha nincs beállítva, akkor autoigazítsa a szöveget az elejéhez.
  • inherittext-align-lasta szülő elem tulajdonságát alkalmazza .

Demó

Ez a bemutató a különböző text-align-lastértékeket mutatja működés közben. Megjegyzés: Az Internet Explorer nem támogatja a startvagy endértékeket.

Lásd a CSS-Tricks (@ css-tricks) tollszövegét-align-last a CodePen-en.

Látványosság

Az Internet Explorer programban text-align-lastcsak akkor működik, ha text-aligna kijelölt elem többi szövegének értéke a justify. Továbbá, az IE nem ismeri fel a startvagy endérték.

A Mozilla böngészőkben text-align-lastaz utolsó soron fog működni a kényszerített sortörés előtt, még akkor is, ha nincs megadva igazítás az elem többi szövegéhez.

Azt is érdemes tudni, hogy text-align-lasta kijelölt elem összes utolsó sorának igazítását állítja be, nem csak az abszolút utolsó sorra. Tehát, ha például van egy divöt bekezdés, akkor a text-align-lastnyilatkozat az egyes bekezdések utolsó sorára vonatkozik.

Ha text-align-lastcsak a tartály legutolsó sorában akarja használni , akkor használhatja a :last-childvagy :last-of-type. A CSS körülbelül így nézne ki:

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

Az alábbi bemutatóban a bal oldalon látható text-align-last: center;egy div-re alkalmazott elem, benne több bekezdéssel. Figyelje meg, hogy az egyes bekezdések utolsó sora középre kerül. A jobb oldalon text-align-last: center;csak a div belsejében található utolsó bekezdésre alkalmazva látható :last-child.

Lásd a CSS-Tricks (@ css-tricks) tollszövegét-align-last a CodePen-en.

Összefüggő

  • szöveg igazítás
  • szöveg-behúzás

Több információ

  • text-align-last a CSS 3. szintű szövegmoduljában (W3C)
  • text-align-last az MDN-nél
  • text-align-last az MSDN-nél
  • text-align-last az Adobe webplatform csapatblogján
  • Webkit Bug 76173, a Chrome megvalósításával kapcsolatban text-align-last

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
35+ kísérleti zászlókkal Dehogy 34+ (előtag) Dehogy 5.5+ (előtag) Dehogy Dehogy