От автора: порой крошечные детали, которые по большей степени никто не замечает, могут как положительно, так и негативно сказаться на пользовательском опыте. К таким деталям относятся такие вещи, как тоненькая тень заголовка или хорошо подобранное расстояние между элементами на веб-странице.
В этом отношении свойство text-align-last оказывается крайне полезным. Свойство задает выравнивание последней строки в блоке или строки, находящейся перед разрывом. Это очень важный момент, потому что зачастую последняя строка в параграфе заполняется не полностью. Вы можете вообще не заметить изменений, но они положительно скажутся на общем виде всего сайта.
В этом уроке мы подробно разберем все аспекты свойства text-align-last, возможные значения, поддержку и поведение данного свойства в отдельных браузерах.
Применение и возможные значения
Работать со свойством text-align-last очень просто. Ниже показано, как выровнять последнюю строку текста по правому краю:
|
1 2 3 4 |
.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. Возьмем код ниже в качестве примера:
|
1 2 3 4 5 6 7 |
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’. Рассмотрим код ниже:
|
1 2 3 4 5 6 7 |
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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
