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

Режими відображення тексту в CSS

Вивчаємо властивість white-space та тег pre. Дізнаємося, як браузер обробляє пробіли, переноси рядків і довгий текст.

Режими відображення тексту в CSS

За замовчуванням браузер об'єднує кілька пробілів в один і автоматично переносить довгі рядки. Властивість white-space дозволяє змінити цю поведінку.

Тег pre

Тег pre зберігає всі пробіли та переноси рядків саме в тому вигляді, у якому вони записані в HTML-коді.


<pre>
Перший рядок
    Другий рядок із відступом
        Третій рядок
</pre>
❗ Важливо:

Тег pre автоматично використовує режим white-space: pre.

Властивість white-space

Властивість white-space визначає, як браузер повинен поводитися з пробілами та переносами рядків.

  • normal — стандартна поведінка браузера.
  • nowrap — текст не переноситься на новий рядок.
  • pre — зберігаються всі пробіли та переноси.
  • pre-wrap — зберігаються пробіли й переноси, але довгі рядки можуть переноситися.
  • pre-line — зберігаються лише переноси рядків, зайві пробіли прибираються.

Приклад nowrap

Текст не переноситься навіть тоді, коли не поміщається всередині блоку.


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

.box {
  width: 200px;
  border: 1px solid black;
  white-space: nowrap;
}

Порівняння pre, pre-wrap і pre-line

Ці значення схожі, але по-різному поводяться з пробілами та переносами рядків.


.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}

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

📌 Завдання:
  1. №1. Виведіть текст так, щоб усі пробіли та переноси збереглися.
  2. №2. Створіть блок шириною 200px і зробіть так, щоб текст не переносився на новий рядок.
  3. №3. Продемонструйте різницю між значеннями pre, pre-wrap і pre-line.
💡 Показати підказку

Для першого завдання можна використати тег pre або властивість white-space: pre.

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

/* №1 */
pre {
}

/* або */

.text {
  white-space: pre;
}

/* №2 */

.box {
  width: 200px;
  white-space: nowrap;
  border: 1px solid black;
}

/* №3 */

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}