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

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

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

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

Исходный 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;
}
0 0
Аватар пользователя user-fa6d15a44a07c640
user-fa6d15a44a07c640
03 июля 2023

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

0 0
Аватар пользователя Ise
Ise
05 января 2025

можно же проще: <p align="justify"> ну если хотите применять стили но без id и class то вот ещеё вариант: <p style="text-align: justify;">

0 0