Выравнивание текста по ширине - CSS-хитрости

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

p ( text-align: justify; text-justify: inter-word; )

Значения

inter-word: Указывает, что текст выравнивается по ширине, регулируя интервал между словами, эффективно создавая дополнительный интервал между словами. Фактически это разновидность word-spacingсвойства.
inter-character: Указывает, что текст просто настраивается путем регулировки интервала между символами, эффективно создавая дополнительный интервал между символами. Фактически это разновидность letter-spacingсвойства.
auto: Позволяет браузеру определять, лучше ли обрабатывать обоснование как inter-wordили inter-character. Это может быть полезно в многоязычных сценариях, где язык контента неизвестен до тех пор, пока он не будет отображен, позволяя пользовательскому агенту браузера выбирать соответственно в зависимости от того, какой метод лучше подходит для языкового контекста.
none: Отключает методы обоснования, эффективно удаляя любые возможности обоснования или переопределяя, где метод обоснования может встречаться в каскаде.

Что такое оправдание?

Выровненный по ширине текст - это причудливый способ сказать, как текст заполняет поле, в котором он находится. Фактически, вы, возможно, уже хорошо знакомы с выравниванием текста и даже не знаете этого. Если вы когда-либо использовали программное обеспечение для редактирования текста, такое как Word и Google Docs, возможно, вам были знакомы эти значки:

Параметры выравнивания и выравнивания текста на панели инструментов Документов Google

Эти первые три задают выравнивание текста, как и text-alignсвойство CSS , где текст может быть выровнен по левому, правому краю или полностью по центру.

Этот четвертый значок является параметром выравнивания и указывает содержимому заполнить всю ширину документа так, чтобы каждая строка была выровнена прямо к краю, независимо от того, влияет ли это на интервал между словами.

Выравнивание содержания в Документах Google добавляет интервал между словами, чтобы каждая строка занимала всю ширину документа.

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

Поддержка браузера

Это text-justifyсвойство включено в спецификацию CSS Text Module Level 3, которая на момент написания этой статьи находится в статусе Editor's Draft.

Это свойство в настоящее время указано как «подверженное риску» быть исключенным в период рекомендации кандидата. Таким образом, не рекомендуется использовать это свойство в производственной среде, так как в ближайшем будущем оно вряд ли станет стандартом для всех браузеров.

Текущая поддержка ограничена Firefox 55+. Internet Explorer 11 и Edge 14+ также поддерживают это свойство, но только его inter-wordзначение, а также неофициальные значения, не включенные в спецификацию W3C.

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.