Свойство CSS text-justify
Свойство CSS text-justify задаёт поведение интервалов между словами или символами при выравнивании текста. Значения и примеры.
Свойство CSS text-justify управляет тем, как браузер распределяет дополнительное пространство при растягивании выровненного текста до края строки. Оно вступает в силу только тогда, когда text-align установлен в justify — само по себе оно не даёт эффекта.
На этой странице рассказывается, что делает text-justify, описывается каждое из его значений, поясняется, когда стоит его применять, перечислены подводные камни поддержки браузерами и показана связь с другими свойствами интервалов.
Какую проблему решает это свойство
Когда вы задаёте text-align: justify, браузер выравнивает каждую строку так, чтобы левый и правый края совпадали с границами блока, как в газетной колонке. Добиться этого можно двумя способами: увеличить отступы между словами или увеличить отступы между символами. text-justify позволяет выбрать стратегию, которую будет использовать браузер, вместо того чтобы полагаться на алгоритм по умолчанию.
Это важно, поскольку правильная стратегия зависит от языка. В языках с пробелами между словами (английский, немецкий, французский) обычно лучше выглядит дополнительный интервал между словами. В языках, где слова пишутся без пробелов (например, китайский, японский и корейский), растягивать текст можно только между символами, поэтому inter-character — наиболее подходящий вариант.
text-justify является одним из свойств CSS3.
| Начальное значение | auto |
|---|---|
| Применяется к | Блочные элементы. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | object.style.textJustify = "inter-character"; |
Синтаксис
text-justify: auto | inter-word | inter-character | none | initial | inherit;Поскольку text-justify не работает без выровненного текста, оба свойства почти всегда задаются вместе:
p {
text-align: justify; /* turn justification on */
text-justify: inter-word; /* choose how the gaps grow */
}Пример свойства text-justify:
Пример кода CSS text-justify
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Результат
При значении inter-word пробелы между словами увеличиваются до тех пор, пока каждая строка не достигнет края контейнера. Уменьшите ширину браузера — и вы увидите, как зазоры сильнее растягиваются на строках, далёких от заполнения ширины.
Пример свойства text-justify со значением «inter-character»:
Пример CSS text-justify со значением inter-character
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>При значении inter-character дополнительный пробел вставляется между отдельными символами, а не только между словами. На латинских текстах эффект малозаметен; для письменностей CJK, где нет пробелов между словами, это значение становится необходимым.
Поддержка браузерами и подводные камни
Поддержка text-justify неравномерна, и перед использованием стоит знать несколько важных особенностей:
inter-character— наиболее надёжное из дополнительных значений: устаревшее ключевое словоdistributeбыло переименовано вinter-character, а старое название объявлено устаревшим.noneподдерживается не везде. Некоторые движки всё равно выравнивают последнюю строку или откатываются к алгоритму по умолчанию, поэтому нужно тестировать, а не предполагать, что выравнивание полностью отключено.- Выровненный текст может создавать «реки» — неровные каналы пустого пространства, тянущиеся вниз по абзацу, — особенно в узких колонках. Сочетание выравнивания с
hyphens: autoи разумной длиной строки помогает уменьшить их. - Последняя строка выровненного блока никогда не растягивается; она остаётся выровненной по левому краю (или следует правилу
text-align-last).
В случае сомнений задайте text-justify: auto (или не задавайте вовсе) и позвольте браузеру самому выбрать наилучшую стратегию для языка содержимого.
Значения
| Значение | Описание | Попробуй |
|---|---|---|
auto | Алгоритм выравнивания определяется браузером. Браузер сам решает, что лучше подходит — inter-word или inter-character. Это значение по умолчанию. | Попробуй » |
inter-word | Браузер увеличивает пространство между словами. Типично для языков с чёткими границами слов. | Попробуй » |
inter-character | Браузер увеличивает пространство между символами при выравнивании. | Попробуй » |
none | Выравнивание отключено. | Попробуй » |
initial | Устанавливает свойство в значение по умолчанию. | Попробуй » |
inherit | Наследует свойство от родительского элемента. |
Связанные свойства
text-align— свойство, которое должно быть равноjustify, чтобыtext-justifyимело эффект.text-align-last— управляет выравниванием последней строки выровненного блока.word-spacing— напрямую задаёт расстояние между словами, независимо от выравнивания.letter-spacing— напрямую задаёт расстояние между символами (трекинг).