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