Урок 11 із 104
11%
← Назад

Переноси в тексті в CSS

Вивчаємо властивість hyphens та тег wbr. Дізнаємося, як автоматично або вручну переносити довгі слова.

Переноси в тексті в CSS

Якщо довгі слова не поміщаються в рядок, браузер може автоматично переносити їх по складах. Для цього використовується властивість hyphens. Також можна вручну вказувати можливі місця переносу за допомогою HTML-тега wbr.

Властивість hyphens

Властивість hyphens керує автоматичним перенесенням слів.

  • none — автоматичні переноси вимкнені.
  • manual — використовуються лише переноси, задані вручну.
  • auto — браузер автоматично переносить слова за правилами мови.

Приклад


<div class="text" lang="uk">
Дуже довгий текст із словами, які можуть автоматично переноситися браузером.
</div>

.text {
  width: 300px;
  hyphens: auto;
}
❗ Важливо:

Для коректної роботи hyphens: auto бажано вказати атрибут lang у HTML. Саме він повідомляє браузеру правила переносу для конкретної мови.

Тег wbr

Тег wbr (Word Break Opportunity) вказує браузеру можливе місце переносу слова. Якщо перенесення не потрібне, тег не впливає на відображення.

super<wbr>long<wbr>word<wbr>example

Практичне завдання

📌 Завдання:
  1. №1. Створіть блок шириною 300px.
  2. №2. Додайте в нього довгий текст.
  3. №3. Зробіть так, щоб браузер автоматично розставляв переноси слів.
💡 Показати підказку

Використайте hyphens: auto та додайте атрибут lang до HTML-елемента з текстом.

✅ Показати відповідь

<!-- HTML -->

<div class="text" lang="uk">
Дуже довгий текст, який містить слова, що можуть автоматично переноситися браузером.
</div>

/* CSS */

.text {
  width: 300px;
  hyphens: auto;
}