Свойство CSS `text-justify`

Свойство text-justify CSS задаёт тип выравнивания текста, который следует применять, когда для элемента установлено значение text-align: justify;.

Синтаксис

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Deprecated value */

/* Global values */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

none

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

auto

Браузер выбирает оптимальный тип выравнивания для текущей ситуации, учитывая баланс между производительностью и качеством, а также то, что лучше всего подходит для языка текста (например, английского, языков CJK и т. д.). Это выравнивание по умолчанию, используемое, если text-justify вообще не задано.

inter-word

Текст выравнивается за счёт добавления пробелов между словами (фактически изменяется word-spacing). Такой способ лучше всего подходит для языков, в которых слова разделяются пробелами, например английского или корейского.

inter-character

Текст выравнивается за счёт добавления пробелов между символами (фактически изменяется letter-spacing). Такой способ лучше всего подходит для таких языков, как японский.

distribute

Работает так же, как inter-character; это значение сохранено для обратной совместимости.

Формальное определение

Формальный синтаксис

text-justify = 
  auto |
  inter-character |
  inter-word |
  none

Примеры

Демонстрация различных значений text-justify

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>

p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

Спецификации

Совместимость с браузерами

См. также

• text-align