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

Свойство text-justify определяет расстояние между словами или символами.

Text-justify выбирает метод выравнивания текста, когда свойство text-align установлено как "justify".

Значение по умолчанию	auto
Применяется	К строчным элементам и элементам ячейки таблицы.
Наследуется	Да
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.textJustify = "inter-character";

Синтаксис

text-justify: auto | inter-word | inter-character | none | initial | inherit;

Пример

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок документа</title>
      <style>
         div {
         text-align: justify;
         text-justify: auto;
      </style>
   </head>
   <body>
      <h2>Пример свойства text-justify</h2>
      <div>
         Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах кот<!DOCTYPE html>
         <html>
            <head>
               <title>Заголовок документа</title>
               <style>
                  div {
                  text-align: justify;
                  text-justify: auto;
               </style>
            </head>
            <body>
               <h2>Пример свойства text-justify</h2>
               <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
            </body>
         </html>
         орых используется Lorem Ipsum.
      </div>
   </body>
</html>

Попробуйте сами!

Пример со значением "inter-character". Измените размер браузера, чтобы увидеть, как работает "justify":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-align: justify;
      text-justify: inter-character;
    </style>
  </head>
  <body>
    <h2>Пример свойства text-justify</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Устанавливает алгоритм выравнивания. Значение по умолчанию.
inter-word	Браузер увеличивает расстояние между словами, что свойственно для языков.
inter-character	Браузер увеличивает расстояние между символами.
none	Выравнивание не применяется.
distribute	Имеет ту же функцию, что inter-word.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Устанавливает свойство в значение по умолчанию.