Чтобы разместить текст по ширине контейнера (блока), можно использовать свойство text-align со значением justify.
Например, если мы хотим, чтобы текст внутри блока шел по ширине контейнера (т.е. занимал всю доступную ширину), можно использовать следующий CSS-код:
.container {
text-align: justify;
}
В этом случае текст будет выглядеть как обычный текст со словами, разделенными пробелами. Но когда браузер видит, что текст перемещается вдоль края блока и заканчивается в пределах нескольких пикселей от края (например, когда строка текста содержит много слов в качестве примера), он автоматически увеличит пробелы между словами, чтобы соответствующие строки текста выглядели равномерно. Этот процесс называется «растяжкой текста».
Также можно правильнее размещать слова с помощью свойства text-justify, которое позволяет настраивать алгоритм расстановки пробелов.
.container {
text-align: justify;
text-justify: distribute-all-lines;
}
В данном примере мы используем значение distribute-all-lines для свойства text-justify, чтобы обеспечить равномерное распределение пробелов между всеми строками текста. Кроме этого значения, существуют и другие значения для text-justify, которые можно применять в зависимости от нужд и задач.