Тект-алигн-ласт - ЦСС-трикови

Anonim

text-align-lastомогућава вам да контролишете поравнање последњег (или јединог) реда текста непосредно пре принудног прекида реда - на пример крај пасуса или ред тачно испред
ознаке.

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

У време писања овог текста подржавају само Мозилла прегледачи и Интернет Екплорер text-align-last(са префиксима добављача), а сваки има мало другачију примену. Својство је требало да почне да ради у Цхроме-у 35, али од Цхроме-а 40 и даље захтева експерименталну заставу веб платформи. Детаљније о применама прегледача у Тачкама интереса.

Вредности

  • left поравнава последњи ред текста лево од контејнера.
  • rightпоравнава последњи ред текста десно од контејнера.
  • center центрира последњи ред текста у контејнеру.
  • justify оправдава последњи ред текста тако да се протеже на целој ширини контејнера, убацујући размак између речи ако је потребно да се повећа дужина реда.
  • startпоравнава текст са „почетком“ реда на основу directionтекста - лево за језике ЛТР, десно за језике РТЛ.
  • endпоравнава последњи ред са „крајем“ реда на основу directionтекста - десно за језике ЛТР, лево за језике РТЛ.
  • autoподразумевано. Поравнава последњи ред текста тако да одговара text-alignсвојству елемента ако је постављено. Ако није подешен, autoпоравнава текст на почетак.
  • inheritпримењује text-align-lastсвојство надређеног елемента.

Демо

Овај приказ показује различите text-align-lastвредности на делу . Напомена: Интернет Екплорер не подржава вредности startили endвредности.

Погледајте оловку тект-алигн-ласт би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Тачке од интереса

У Интернет Екплореру text-align-lastради само када је text-alignостатак текста у изабраном елементу постављен на justify. Исто тако, односно не препозна startили endвредност.

У прегледачима Мозилла, text-align-lastрадиће на последњем реду пре принудног прекида реда, чак и ако у елементу није наведено поравнање за остатак текста.

Такође је вредно знати да text-align-lastпоставља поравнање за све последње редове унутар изабраног елемента, а не само за апсолутни последњи ред текста. Тако, на пример, ако у себи имате divпет параграфа, ваша text-align-lastизјава ће се применити на последњи ред сваког од пасуса.

Ако желите да користите text-align-lastсамо последњу линију у контејнеру, можда ћете моћи да користите :last-childили :last-of-type. Ваш ЦСС би изгледао отприлике овако:

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

У демонстрацији испод, лева страна приказује text-align-last: center;примену на див са више параграфа унутар њега. Приметите да је последњи ред сваког пасуса центриран. Десна страна приказује text-align-last: center;примењено само на последњи пасус унутар див-а користећи :last-child.

Погледајте оловку тект-алигн-ласт би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Повезан

  • Поравнање текста
  • увлачење текста

Више информација

  • тект-алигн-ласт у ЦСС Текстуалном модулу ниво 3 (В3Ц)
  • тект-алигн-ласт на МДН
  • тект-алигн-ласт на МСДН-у
  • тект-алигн-ласт на блогу тима Адобе веб платформе
  • Вебкит Буг 76173, у вези са Цхроме-овом имплементацијом text-align-last

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
35+ са експерименталним заставицама Јок 34+ (префикс) Јок 5,5+ (са префиксом) Јок Јок