Как выровнять текст по ширине в html

Выравнивание текста отвечает за его внешний вид, формирование краев абзаца. Обычно текст обрамляют тегами или и затем применяют css свойство text-align со следующим значением:

• по левому краю - left
• по правому краю - right
• по центру - center
• по ширине - justify

Отличие между абзацем (тег ) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .

Исходный HTML-файл:

<p>Этот текст по умолчанию займет левое вырывание</p>
<p class="center">Пример текста с выравниваем по центру</p>
<p class="right">Пример текста с выравниваем по правому краю</p>
<p class="justify">
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине 
  Пример текста с выравниваем по ширине
</p>

Стили:

.center {
  text-align: center;
}

.right {
  text-align: right;
}
 
.justify {
  text-align: justify;
}

С днем рождения тебя,Танюха.Желаю тебя всего самого наилучшего,чтоб сбывались все твои мечты и желания.Я очень рада,что познакомилась с тобой.Ты очень хороший человек,всегда меня понимаешь и поддерживаешь,спасибо тебе за это)Желаю тебе найти хорошего мужлана,а то Мага нефор какой-то злойcode text here

можно же проще: ну если хотите применять стили но без id и class то вот ещеё вариант:

Текст по ширине выравнивает CSS-свойство text-align: justify:

p {
  text-align: justify;
}

Браузер растянет пробелы между словами так, чтобы строки касались обоих краёв блока. Последняя строка абзаца остаётся выровненной по левому краю.

Прямо в HTML

<p style="text-align: justify;">Текст абзаца...</p>

Атрибут align="justify" браузеры понимают. В HTML5 он устарел, и валидатор покажет ошибку.

Значения text-align

Чтобы не было больших пробелов

В узких колонках выравнивание по ширине растягивает пробелы, и в тексте появляются «реки». Включите переносы слов:

<html lang="ru">

hyphens: auto работает, только если указан язык страницы в lang. Тогда браузер переносит русские слова по слогам.

Выровнять последнюю строку

p {
  text-align: justify;
  text-align-last: justify;   /* последняя строка тоже по ширине */
}

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

Растянуть элементы на всю ширину

Если нужно разнести по ширине пункты меню или карточки, используйте флексбокс:

.menu {
  display: flex;
  justify-content: space-between;
}

Выравнивание текста и типографику разбирают на курсе «Профессиональная верстка».