Довгі слова в CSS

Вивчаємо властивості word-break та overflow-wrap. Дізнаємося, як переносити дуже довгі слова та чим відрізняються ці властивості.

Довгі слова в CSS

Іноді слово настільки довге, що не поміщається в контейнер і виходить за його межі. Для керування такими ситуаціями використовуються властивості word-break та overflow-wrap.

Властивість overflow-wrap

overflow-wrap дозволяє браузеру переносити дуже довгі слова лише тоді, коли вони не поміщаються в рядок.


.box {
  width: 220px;
  overflow-wrap: break-word;
}

Властивість word-break

word-break визначає, як саме можна розривати слова. Значення break-all дозволяє переносити слово практично в будь-якому місці.


.box {
  width: 220px;
  word-break: break-all;
}

Порівняння

overflow-wrap: break-word — переносить слово лише тоді, коли це необхідно.
word-break: break-all — може переносити слово між будь-якими символами.
Для звичайного тексту найчастіше використовують overflow-wrap: break-word.


<div class="wrap">
superhypermegagigalongwordwithoutspacesandbreakpoints
</div>

<div class="break">
superhypermegagigalongwordwithoutspacesandbreakpoints
</div>


.wrap {
  width: 220px;
  border: 1px solid black;
  overflow-wrap: break-word;
}

.break {
  width: 220px;
  border: 1px solid black;
  word-break: break-all;
}

❗ Важливо:

Для більшості сайтів рекомендується використовувати overflow-wrap: break-word, оскільки він переносить слова лише за необхідності та робить текст читабельнішим.

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

📌 Завдання:

№1. Напишіть код, який демонструє роботу властивостей word-break та overflow-wrap.
№2. Покажіть різницю між цими двома властивостями на прикладі дуже довгого слова.

💡 Показати підказку

Створіть два блоки однакової ширини та застосуйте до кожного різну властивість.

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


/* HTML */

<div class="wrap">
superhypermegagigalongwordwithoutspacesandbreakpoints
</div>

<div class="break">
superhypermegagigalongwordwithoutspacesandbreakpoints
</div>

/* CSS */

.wrap {
  width: 220px;
  border: 1px solid black;
  overflow-wrap: break-word;
}

.break {
  width: 220px;
  border: 1px solid black;
  word-break: break-all;
}