Свойство CSS text-align-last
Свойство text-align-last (не путать с HTML align) определяет, как будет выравниваться последняя строка блока или строка перед принудительным разрывом. Это важно, так как в последней строке абзаца, как правило, не содержится достаточно текста, чтобы заполнить все пространство.
В этой статье мы рассмотрим все аспекты, касающиеся свойства text-align-last, в том числе принимаемые значения и поддержку браузерами.
Использование и принимаемые значения
Применять свойство text-align-last просто. Вот фрагмент кода для выравнивания последней строки текста по правому краю:
.intro-graph {
text-align: justify; // Required for IE and Edge
text-align-last: right;
}Свойство может принимать семь значений. Вам, вероятно, известны стандартные значения HTML text align:left, right и center. Они выравнивают текст в последней строке по правому краю, по левому краю и по центру контейнера.
Приведенный ниже пример иллюстрирует различия между этими тремя значениями:
Четвертое значение, justify, выравнивает последнюю строку таким образом, что текст равномерно распределяется по всей ширине контейнера. Это достигается за счет добавления соответствующего количества пробелов между словами. В зависимости от количества текста это свойство можно использовать, чтобы полностью заполнить пространство в последней строке, но при этом не получить слишком большие разрывы между словами.
Текст во втором абзаце также распределен по ширине, но так как последняя строка содержит только одно слово, оно располагается слева.
Выравнивание последней строки текста по левому краю подходит для языков, которые читаются слева направо (LTR), но это будет неправильно для языков RTL. В таких случаях использование значений left или right может вызвать проблемы.
К счастью, можно использовать значение start, чтобы выровнять текст по краю, с которого начинается написание и чтение. Это означает, что, установив для свойства text-align-last значение start, вы выровняете текст по левому краю для языков LTR и по правому краю для языков RTL.
Также можно использовать значение end, чтобы выровнять текст по противоположному краю от того, с которого начинается написание и чтение. Это будет соответствовать значению right для языков LTR и left для языков RTL.
Значение по умолчанию для этого свойства auto. В случае его использования текст в последней строке выравнивается в соответствии со значением свойства HTML text align, если только для него не задано значение justify. Иначе текст распределяется по ширине контейнера, только если для свойства text-justify задано значение distribute. В противном случае текст выравнивается по краю, с которого начинается написание и чтение.
Важные замечания
Чтобы text-align-last работало, для свойства text-align должно быть задано значение justify. Но это правило реализовано только в IE и Edge. В Firefox и Chrome свойство работает и без установки для text-align значения justify. В приведенном ниже примере текст должен быть выровнен по правому краю в Edge и IE. В других браузерах последние строки абзацев будут выравниваться в соответствии со значением свойства text-align-last, а остальные строки будут выровнены по правому краю.
Если мы не задаем для text-align значение align justify HTML, результат выглядит не столь привлекательно. Поэтому вы, вероятнее всего, установите распределение текста по ширине.
Свойство работает, даже если в абзаце присутствует принудительный разрыв строки, заданный с помощью тега <br> или чего-то в этом роде. Имейте в виду, что это свойство будет влиять на все последние строки текста внутри указанного элемента, а не только на самую крайнюю. Например, если текст внутри элемента article или div содержит три абзаца, в каждом из них последняя строка будет выравниваться в соответствии со значением свойства text-align-last, заданным для всего родительского элемента.
Если нужно выровнять только самую последнюю строку контента, то можно использовать селекторы :last-child или :last-of-type. Возьмите код из приведенной ниже демо-версии в качестве примера:
article {
text-align: justify;
}
article p:last-of-type {
text-align-last: right;
}Он выравнивает последнюю строку последнего абзаца нашей статьи по правому краю. Остальные строки выравниваются на основе значения свойства HTML text align.
Также можно использовать другие селекторы: :even и :odd, чтобы изменить выравнивание.
Иногда абзац может состоять только из одной строки. В этом случае, если вы указали значения и для свойства text-align, и для свойства text-align-last, то последнее свойство будет иметь приоритет.
Рассмотрим следующий фрагмент кода:
p {
text-align: justify;
}
p:nth-of-type(2) {
text-align-last: left;
}Если второй абзац имеет только одну строку, то текст будет выравниваться по левому краю, потому что text-align-last будет иметь приоритет. В приведенной ниже демо-версии показан данный код CSS в действии, а также несколько других примеров HTML align.
Поддержка браузерами
Поддержка этого свойства может быть включена с помощью опции "Включить экспериментальные функции веб-платформы" в Google Chrome и Opera, начиная с версий 35 и 22 соответственно. Оно полностью поддерживается в Chrome 47+ и Opera 34+.
Чтобы использовать это свойство в Firefox, придется добавлять префикс -moz-. Значения start и end не поддерживаются IE. В то же время, Edge полностью поддерживает это свойство. Единственный популярный браузер, который полностью не поддерживает text-align-last - это Safari.
Заключение
Также text-align-last можно применять для выравнивания текста изображений из нескольких строк. Если вы знаете другие сценарии использования этого свойства, или у вас возникли вопросы, пожалуйста, напишите об этом в комментариях.