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 от 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 от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • выравнивание текста
  • отступ текста

Дополнительная информация

  • text-align-last в текстовом модуле CSS уровня 3 (W3C)
  • text-align-last в MDN
  • text-align-last в MSDN
  • text-align-last в блоге группы разработчиков веб-платформы Adobe
  • Ошибка Webkit 76173, касающаяся реализации Chrome text-align-last

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
35+ с экспериментальными флагами Неа 34+ (с префиксом) Неа 5.5+ (с префиксом) Неа Неа