text-justify

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Синтаксис

css
/* Ключевые слова */
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Устаревшее значение */

/* Глобальные значения */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

Свойство text-justify указывается как одно ключевое слово, выбранное из нижеследующего списка значений.

Значения

none

Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства text-align, хотя оно полезно, если вам нужно включать и выключать выравнивание.

auto

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

inter-word

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

inter-character

Выравнивание текста по средствам добавления пробелов между символами (effectively varying letter-spacing), что наиболее подходит для таких языков как японский.

distribute Устарело

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

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

Начальное значениеauto
Применяется кстрочным элементам и ячейкам таблиц
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

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

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

Примеры

css
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;
}

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

Specification
CSS Text Module Level 3
# text-justify-property

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-justify
auto
Experimental
inter-character
Experimental
inter-word
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

Смотрите также