Text-align-last - CSS-трикове

Anonim

text-align-lastви позволява да контролирате подравняването на последния (или единствения) ред текст точно преди принудително прекъсване на реда - например края на абзац или реда точно пред
етикет.

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

По време на това писане само браузърите Mozilla и Internet Explorer поддържат text-align-last(с префикси на доставчици) и всеки има малко по-различно изпълнение. Собствеността трябваше да започне да работи в Chrome 35, но от Chrome 40 все още се изисква флагът на експерименталните уеб платформи. Повече подробности за внедряванията на браузъра в точките на интерес.

Стойности

  • left подравнява последния ред текст вляво от контейнера.
  • rightподравнява последния ред текст отдясно на контейнера.
  • center центрира последния ред текст в контейнера.
  • justify оправдава последния ред текст, така че да обхваща цялата ширина на контейнера, като се добавя интервал между думи, ако е необходимо, за да се увеличи дължината на реда.
  • startподравнява текста до „старта“ на реда въз основа directionна текста - вляво за LTR езици, вдясно за RTL езици.
  • endподравнява последния ред до „края“ на реда въз основа directionна текста - вдясно за LTR езици, вляво за RTL езици.
  • autoпо подразбиране. Подравнява последния ред текст, за да съответства на text-alignсвойството на елемента , ако е зададено. Ако не е зададено, autoподравнява текста в началото.
  • inheritприлага text-align-lastсвойството на родителския елемент.

Демонстрация

Тази демонстрация показва различните text-align-lastстойности в действие. Забележка: Internet Explorer не поддържа startили endстойностите.

Вижте Pen text-align-last by CSS-Tricks (@ css-tricks) на CodePen.

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

В Internet Explorer text-align-lastработи само когато text-alignостаналата част от текста в избрания елемент е зададена на justify. Също така IE не разпознава startили endстойността.

В браузърите Mozilla text-align-lastще работи на последния ред преди принудително прекъсване на ред, дори ако в елемента не е посочено подравняване за останалата част от текста.

Също така си струва да знаете, че text-align-lastзадава подравняването за всички последни редове в избрания елемент, а не само за абсолютния последен ред текст. Така например, ако имате буквата divс пет параграфа в нея, вашата text-align-lastдекларация ще се прилага за последния ред на всеки от параграфите.

Ако искате да използвате text-align-lastсамо на последния ред в контейнера, може да можете да използвате :last-childили :last-of-type. Вашият CSS ще изглежда по следния начин:

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

В демонстрацията по-долу, лявата страна показва text-align-last: center;приложени към div с множество абзаци вътре в него. Забележете, че последният ред на всеки абзац е центриран. Дясната страна показва text-align-last: center;прилагат само за последния параграф вътре в DIV използване :last-child.

Вижте Pen text-align-last by CSS-Tricks (@ css-tricks) на CodePen.

Свързани

  • подравняване на текст
  • текст-отстъп

Повече информация

  • text-align-last в CSS Text Module Level 3 (W3C)
  • text-align-last на MDN
  • text-align-last на MSDN
  • text-align-last в блога на екипа на уеб платформата на Adobe
  • Грешка в Webkit 76173, относно прилагането на text-align-last

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
35+ с експериментални флагове Не 34+ (с префикс) Не 5,5+ (с префикс) Не Не