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

text-justify не установлен.

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 и т. д.). Это выравнивание по умолчанию используется, если

text-justify вообще не задан.

межсловный

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

межсимвольный

Текст выравнивается путем добавления пробела между символами (фактически изменяя межбуквенный интервал

), что больше всего подходит для таких языков, как японский.

распространять Устаревший

Демонстрирует то же поведение, что и межсимвольный ; это значение сохранено для обратной совместимости.

900 70074
Исходное значение auto
Применяется к элементам inline-level и table-cell
да
Расчетное значение как указано
Тип анимации дискретный
text-justify
нет |
межсловный |
межсимвольный

Демонстрация различных значений выравнивания текста 

 

  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. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery 
 9001
333
HTML Reference 

 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3.CSS Reference 
 Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
 90393 Top3 Examples
Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры How To 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
No related posts.