Выравнивание текста по ширине
Свойство CSS text-align знает каждый начинающий разработчик. Поговорим о наименее используемом его значении: justify
Мы знаем, что согласно определению MDN свойство text-align
описывается, как выравнивание линейного содержимого, в том числе текста в блоке родительского элемента. В свою очередь, значение свойства justify
выстраивает левые и правые границы текста по левым и правым границам содержимого параграфа. Иными словами, происходит одновременное выравнивание текста по левому и правому краю за счет добавления текста между словами.
Вот пример текста с выравниванием по левому краю text-align: left
:
А вот текст с выравниванием по ширине text-align: justify
:
Когда использовать justify?
Значение justify
целесообразно использовать далеко не во всех случаях. Наиоболее подходящий вариант - длинная статья. Посколько образ страницы печатного издания сильно влияет на наше подсознание, такой вид контента будет скорее всего приятен пользователю.
Внимание! Не нужно экспериментировать с
text-align: justify
для вывода содержимого страницы на экран мобильного устройства. Результат будет плачевным, из-за малой ширины области видимости.
Браузерная совместимость
Хорошая новость: text-align: justify
поддерживается практически всеми браузерами.
Спасибо за внимание.