text-justify ⚡️ HTML и CSS с примерами кода
Свойство text-justify
определяет какой тип выравнивания следует применить к тексту, когда text-align: justify;
применяется к элементу.
- hanging-punctuation
- hyphens
- letter-spacing
- line-break
- overflow-wrap
- paint-order
- tab-size
- text-align
- text-align-last
- text-indent
- text-justify
- text-size-adjust
- text-transform
- white-space
- word-break
- word-spacing
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис
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
Браузер выбирает лучший тип выравнивания в текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что более подходит для языка текста (например, английского, иероглифных языков, и т. п.). Оно используется по умолчанию, если
не установлен.
inter-word
Выравнивание текста по средствам добавления пробелов между словами (эффективно варьируя word-spacing
), что наиболее подходит для языков, которые используют разделение слов пробелами, таких как английский или корейский.
inter-character
Выравнивание текста по средствам добавления пробелов между символами (эффективно варьируя letter-spacing
), что наиболее подходит для таких языков как японский.
distribute
Показывает тоже поведение, что и inter-character
это значение сохранилось для обратной совместимости.
Спецификация
- CSS Text Module Level 3
Пример
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
Ссылки
- text-align MDN (рус.)
text-align: left, right, center, justify
Поддержка браузерами
12.0+ | 3.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство text-align
указывает, каким образом будет выравниваться строчное содержимое (текст, изображения) по горизонтали, внутри родительского элемента контейнера (блок, ячейка таблицы, поле ввода формы).
Примечание: свойство text-align
не выравнивает сам элемент контейнер к которому оно применено, оно оказывает эффект только на его строчное содержимое. Свойство не даст никакого эффекта, если его применить для выравнивания напрямую к строчному элементу.
Значение по умолчанию: | left если направление текста слева направо, и right если направление текста справа налево |
---|---|
Применяется: | к блочным контейнерам (block, inline-block, table-cell, table-captions, list-item) |
Анимируется: | нет |
Наследуется: | да |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.textAlign=»right» |
Синтаксис
text-align: left|right|center|justify|inherit;
Значения свойства
Значение | Описание |
---|---|
left |
Выравнивает текст по левому краю.![]() |
right |
Выравнивает текст по правому краю. |
center |
Выравнивает текст по центру.(Каждая срока текста выравнивается относительно центра элемента, имея одинаковые расстояния до краёв элемента с обеих сторон строки.) |
justify |
Растягивание текста по ширине. Таким образом каждая строка текста имеет одинаковую ширину (как в газетах или журналах), растягиваясь от одного края элемента до другого. Обратите внимание, что при растягивании текста по всей ширине элемента, расстояние между словами может заметно увеличиваться. |
inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример
text-align:
left
right
center
justify
CSS свойство text-align
позволяет управлять выравниванием текста внутри любого HTML элемента. С помощью
text-align
можно выравнять текст по левому или правому краю элемента, центрировать каждую строку текста или растянуть текст от одного края элемента до другого (подобно абзацам печатных изданий).
div {
text-align: left;
}
text-justify — CSS: Каскадные таблицы стилей
Свойство CSS text-justify
устанавливает, какой тип выравнивания должен применяться к тексту, когда text-align
: justify;
устанавливается на элемент.
выравнивание по тексту: нет; выравнивание текста: авто; выравнивание по тексту: между словами; выравнивание по тексту: межсимвольное; выравнивание по тексту: распространение; /* Устаревшее значение */ /* Глобальные значения */ выравнивание по тексту: наследовать; выравнивание по тексту: начальный; выравнивание текста: вернуться; выравнивание текста: возврат слоя; выравнивание текста: не установлено;
Значения
-
нет
Выравнивание текста отключено.
Это имеет тот же эффект, что и отсутствие установки
text-align
вообще, хотя это полезно, если вам по какой-то причине нужно включать и выключать выравнивание.-
авто
Браузер выбирает лучший тип обоснования для текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что наиболее подходит для языка текста (например, английский язык, языки CJK и т. д.). Это выравнивание по умолчанию используется, если
вообще не задан.-
межсловный
Текст выравнивается путем добавления пробела между словами (фактически меняющегося
word-spacing
), что наиболее подходит для языков, в которых слова разделяются пробелами, таких как английский или корейский.-
межсимвольный
Текст выравнивается путем добавления пробела между символами (фактически изменяя
межбуквенный интервал
), что больше всего подходит для таких языков, как японский.-
распространять
Устаревший Демонстрирует то же поведение, что и
межсимвольный
; это значение сохранено для обратной совместимости.
Исходное значение | auto |
---|---|
Применяется к | элементам inline-level и table-cell |
да | |
Расчетное значение | как указано |
Тип анимации | дискретный |
нет |
межсловный |
межсимвольный
Демонстрация различных значений выравнивания текста
text-justify: none
—
Lorem ipsum dolor sit amet, consectetur адипистинг эл. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam.Quisque sed nisi pulvinar, консекват Justo id, feugiat leo. Cras Eu elementum dui.
text-justify: auto
—
Lorem ipsum dolor sit amet, consectetur адипистинг эл. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, консекват Justo id, feugiat leo. Cras Eu elementum dui.
text-justify: распределить
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Дуис ниси велит, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, conequat justo id, feugiat leo. Cras Eu elementum dui.
text-justify: interword
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Дуис ниси велит, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, conequat justo id, feugiat leo. Cras Eu elementum dui.
text-justify: inter-character
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc ornare maximus vehicula. Дуис ниси велит, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, conequat justo id, feugiat leo. Cras Eu elementum dui.
р { размер шрифта: 1.5em; граница: 1px сплошной черный; отступ: 10 пикселей; ширина: 95%; поле: 10px авто; выравнивание текста: по ширине; } .никто { выравнивание текста: нет; } .авто { выравнивание текста: авто; } .расстояние { выравнивание по тексту: распространение; } .слово { выравнивание по тексту: между словами; } .char { выравнивание по тексту: межсимвольное; }
Спецификация |
---|
Текстовый модуль CSS, уровень 3 # text-justify-property |
Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
-
выравнивание по тексту
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Свойство выравнивания текста CSS
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Установите метод выравнивания на «межсловный», если для параметра выравнивания текста установлено значение «оправдать»:
дел.
{
выравнивание текста: по ширине;
выравнивание по тексту: между словами;
}
Попробуйте сами »
Определение и использование
Свойство text-justify
указывает метод выравнивания
текста, когда для выравнивания текста установлено значение «по ширине».
Значение по умолчанию: | авто |
---|---|
Унаследовано: | да |
Анимация: | нет.![]() |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.textJustify=»inter-word» |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Собственность | |||||
---|---|---|---|---|---|
выравнивание по тексту | Да* | 11,0 | 55,0 | 10.0.3 | Да* |
*Эта функция стоит за параметром Включить экспериментальные функции веб-платформы (необходимо установить значение
Включено). Чтобы изменить настройки в Chrome: введите «chrome://flags» в
Браузер Хром. Чтобы изменить настройки в Opera: введите «флаги» в Opera
браузер.
Синтаксис CSS
выравнивание текста: авто|межслово|межсимвольно|нет|начальный|наследовать;
Значения свойств
Значение | Описание | Демо |
---|---|---|
авто | Браузер определяет алгоритм выравнивания | Играй » |
межсловный | Увеличивает/уменьшает расстояние между словами | Играй » |
межсимвольный | Увеличивает/уменьшает расстояние между символами | Играй » |
нет | Отключает методы обоснования | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальный | Играй » |
унаследовать | Наследует это свойство от родительского элемента. Читать о наследовать |
❮ Предыдущий Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
![](/800/600/http/simpleicon.com/wp-content/uploads/justify.png)
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9001333 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference90393 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQueryFORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.