Знакомство со свойством text-align-last

Знакомство со свойством text-align-last

От автора: порой крошечные детали, которые по большей степени никто не замечает, могут как положительно, так и негативно сказаться на пользовательском опыте. К таким деталям относятся такие вещи, как тоненькая тень заголовка или хорошо подобранное расстояние между элементами на веб-странице.

В этом отношении свойство text-align-last оказывается крайне полезным. Свойство задает выравнивание последней строки в блоке или строки, находящейся перед разрывом. Это очень важный момент, потому что зачастую последняя строка в параграфе заполняется не полностью. Вы можете вообще не заметить изменений, но они положительно скажутся на общем виде всего сайта.

В этом уроке мы подробно разберем все аспекты свойства text-align-last, возможные значения, поддержку и поведение данного свойства в отдельных браузерах.

Применение и возможные значения

Работать со свойством text-align-last очень просто. Ниже показано, как выровнять последнюю строку текста по правому краю:

.intro-graph {
  text-align: justify; // Required for IE and Edge 
  text-align-last: right;
}

Свойство может принимать 7 возможных значений. Обычные значения вам, скорее всего, знакомы. Это left, right и center. Эти значения выравнивают текст на последней строке по левому, правому краям и центру контейнера соответственно. В демо ниже можно увидеть разницу между тремя значениями:

Четвертое значение justify выравнивает текст на последней строке по ширине контейнера (текст растягивается до левого и правого краев). В данном случае между словами добавляется нужное количество пробелов. Если текста на последней строке будет достаточно, то данное значение можно использовать для заполнения всей строки. В таком случае пробелы между словами не будут казаться чересчур большими. Текст во втором параграфе также выровнен по ширине. Однако из-за того, что в последней строке всего одно слово, оно выровнено по левому краю.

Левое выравнивание последней строки текста прекрасно работает с языками, читающимися слева направо (LTR языки), однако для языков арабской группы (когда слова читаются справа налево RTL) такое выравнивание совершенно не подходит. В таких случаях если вы не знаете заранее, какие языки будут использоваться, со значениями left и right могут возникнуть проблемы.

К счастью, для выравнивания текста по стартовой точке строки на основе направления текста можно использовать ключевое слово start. То есть свойство text-align-last: start будет выравнивать текст по левому краю в LTR языках и по правому краю в RTL языках. Точно таким же образом можно использовать значение end для выравнивания текста по конечной точке в зависимости от его направления. В таком случае текст будет выравниваться по правому краю в LTR языках и по левому в RTL языках.

Значение auto является значением по умолчанию. Если задать это значение, текст на последней строке будет выравниваться, исходя из значения свойства text-align, если последнее не задано в justify. Со значением justified текст будет выравниваться по ширине только в случае, если свойство text-justify задано в distribute. В противном случае текст выравнивается по стартовой точке.

Примечания

В спецификации говорится, что для работы свойства text-align-last сперва необходимо задать свойство text-align в значение justify. Тем не менее, судя по всему данное правило работает только в IE и Edge. В Chrome и Firefox свойство работает и без text-align: justify. В демо ниже весь текст должен выравниваться по правому краю в Edge и IE. В остальных браузерах последняя строка будет выравниваться в зависимости от значения свойства text-align-last, все остальные строки будут выравниваться по правому краю.

Результат может показаться не столь привлекательным, как с просто свойством text-align: justify. В большинстве случаев вы будете просто выравнивать текст по ширине.

Свойство работает даже при разрыве строки с помощью тега br или чего-то еще. Также стоит помнить, что свойство выравнивает последнюю строку внутри заданного блока, а не последнюю строку контента. К примеру, если текст внутри article или div разделен на три параграфа, то в каждом параграфе последняя строка будет выравниваться при помощи свойства 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 и 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 кода сверху и еще два примера.

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

Мы обсудили все важные моменты свойства text-align-last, теперь давайте поговорим про поддержку. Активировать данное свойство можно при помощи флага «Enable Experimental Web Platform Features» в браузерах Chrome и Opera, начиная с версий 35 и 22 и далее соответственно. В Chrome и Opera полная поддержка начинается с версий 47 и 34+.

В Firefox данное свойство работает с префиксом –moz-. В IE не поддерживаются значения start и end. Тем не менее, в Edge свойство поддерживается полностью. Отличился только браузера Safari, который вообще не поддерживает text-align-last. Более подробно о поддержке можно прочитать по ссылке.

Общая поддержка свойства составляет 61.85%, что не должно отпугнуть вас от мысли использовать его. Пользователи, чьи браузеры не имеют поддержки свойства, просто не заметят разницы.

Заключение

Свойство text-align-last можно использовать для выравнивания текста в статье, однако есть еще один интересный пример использования – выравнивание длинных подписей к изображениям, когда текст не помещается на одной строке целиком. Если вы знаете про другие способы применения данного свойства, или у вас возникли вопросы, пишите об этом в комментариях.

Автор: Nitish Kumar

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree