Press shift question mark to access a list of keyboard shortcuts
Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Justify — это одно доступное значение для свойства text-align
.
Это позволяет форматировать текст в стиле, часто используемом в оформлении газет.
В этом эпизоде мы рассмотрим 12 возможных значений для text-align
, одно из которых является justify
. Далее мы рассмотрим использование выровненного текста со столбцами CSS и, наконец, рассмотрим, как вы можете использовать justify
для создания плавной адаптивной грид-системы с помощью всего нескольких строк кода.
Выровнять текст
Свойство text-align
выполняет очень знакомое действие выравнивания текста. Любой, кто читал слова на странице или использовал текстовый процессор, знаком с идеей выравнивания текста по левому, центральному или правому краю.
Это 3 наиболее распространенных значения, используемых с text-align
но есть и другие.
-
left
-
right
-
center
-
justify
-
start
-
end
-
start end
-
match-parent
-
<string>
-
start <string>
-
<string> end
-
inherit
start
и end
ключевые слова аналогичны left
и right
но учитывают направление текста. Если язык слева направо, start
и left
эквивалентны. Если направление текста rtl
тогда start
и right
эквивалентны.
Соответствие match-parent
значения аналогично inherit
но start
и end
рассчитываются в соответствии с указанием родителя. Это значение плохо поддерживает браузер, но работает в Chrome.
Значения <string>
позволяют определить выравнивание по произвольной строке текста. Это значение в настоящее время не поддерживается ни в одном браузере, поэтому я не смог его протестировать. Пример для MDN звучит довольно полезно, хотя для выравнивания десятичных значений по полной строке «.».
CSS-столбцы
Оставляя позади это болото совместимости браузера и некоторые довольно нишевые способы использования text-align
, давайте рассмотрим нечто более наглядное, когда text-align: justify
становится очень полезным.
Иногда дизайну выгодно разбивать большие блоки текста на несколько столбцов. Раньше это было царством довольно сложного Javascript, но теперь это можно сделать просто в CSS, используя свойство column-count
. Это свойство поддерживается во всех современных браузерах, но требует префиксов во всем, кроме IE.
.box { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
Встроенный контент автоматически переформатируется при изменении доступного пространства. Довольно мило.
Чтобы усилить визуальный эффект от столбцов и больше походить на газетную статью, мы можем использовать text-align: justify
.
Сетки
Мы видели, как мы можем манипулировать выравниванием текста, чтобы оправдать копирование и создавать аккуратно определенные столбцы. Также возможно использовать justify
для создания плавной, гибкой системы сетки без поплавков, без исправлений и без драм. Для получения дополнительной информации о float
и решениях некоторых из его болевых точек, посмотрите «Эпизод 6: Поплавок» .
Выровненный текст выравнивает его левый и правый края по левому и правому краям его контейнера блока. Мы можем создать ряд элементов inline-block
и расположить их в сетке, выровняв содержимое их контейнерного элемента. Я читал об этой технике в статье, опубликованной Патриком Кункой в марте 2013 года, и это довольно удивительно.
Я создам неупорядоченный список с классом «grid-container» с шестью элементами списка, которые будут действовать как «grid-элементы».
Я добавлю ширину, цвет фона и некоторые отступы к элементам списка, чтобы немного их разнести. Я также установлю их для display: inline-block
который требуется для их обоснования. Чтобы удалить интервал, введенный inline-block
, я установлю нулевой font-size
контейнера сетки, а font-size
элементов сетки — 1rem
.
Теперь мы устанавливаем text-align: justify
на контейнере сетки, но прежде чем элементы сетки будут равномерно распределены, нам нужно создать «скрытый» элемент полной ширины, который будет определять пространство, в котором нужно разложить элементы.
Используя псевдоэлемент :after
, немного похожий на подход, используемый в clearfix, мы можем сделать так, чтобы ширина контейнера сетки была такой же широкой, как и у его родителя. Теперь элементы сетки правильно располагаются и переформатируются по мере изменения размера окна браузера.
* { -moz-box-sizing: border-box; box-sizing: border-box; } ul { margin: 0; padding: 0; text-align: justify; font-size: 0; } ul:after { content: ""; display: inline-block; width: 100%; } li { display: inline-block; width: 50%; margin: 0 0 1em; padding: 1em; background: #eee; font-size: 1rem; text-align: left; }
Изменение ширины элементов списка позволяет легко создавать различное количество столбцов, не выполняя большого количества вычислений для полей и ширины желоба. Я думаю, что это фантастически простая и элегантная техника, которая может пригодиться для будущего проекта.
Следите за нашей статьей Quick Tip в ближайшее время!