Урок 33 із 239
14%
← Назад

Вирівнювання тексту одночасно вправо і вліво в CSS

Навчіться вирівнювати великий текстовий блок по обох краях за допомогою text-align: justify.

Вирівнювання тексту одночасно вправо і вліво в CSS

Для вирівнювання тексту одночасно по лівому і правому краю використовується значення justify властивості text-align.

Такий ефект добре помітний тільки у довгих текстових блоках, оскільки браузер збільшує проміжки між словами, щоб вирівняти текст по ширині.

<p>
  Some long text that will be aligned on both sides.
</p>
p {
  text-align: justify;
  width: 300px;
}

Властивість width задає ширину абзацу. Завдяки обмеженій ширині ефект вирівнювання justify стає помітнішим.

ВластивістьЗначенняРезультат
text-alignjustifyТекст вирівнюється по двох краях
width300pxОбмежує ширину текстового блоку
  • justify часто використовується для великих статей та описів.
  • Текст стає схожим на газетну колонку.
  • Для коротких рядків ефект майже непомітний.
❗ Важливо:

Не використовуйте justify для коротких текстів, меню або кнопок — там він часто виглядає гірше.

📌 Завдання:
  1. Створіть абзац із довгим текстом.
  2. Встановіть ширину абзацу 300px.
  3. Додайте text-align: justify.
  4. Порівняйте результат з вирівнюванням left.
💡 Показати підказку

Для вирівнювання тексту по обох краях використовуйте значення justify.

✅ Показати відповідь
p {
  text-align: justify;
  width: 300px;
}