white-space

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

Спробуйте його в дії

Ця властивість задає дві речі:

  • Чи перекриваються пробіли, і якщо перекриваються — то як.
  • Чи може відбутися перенос рядка, і як він відбувається.

[!NOTE] Аби слова розривались посередині, слід натомість використати overflow-wrap, word-break або hyphens.

Синтаксис

/* Значення з одного ключового слова */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Скорочені значення white-space-collapse і text-wrap */
white-space: collapse balance;
white-space: preserve nowrap;

/* Глобальні значення */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

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

Значення

Значення властивості white-space може бути задано у вигляді одного ключового слова, вибраного зі списку значень нижче, або двох значень, що являють скорочення властивостей white-space-collapse і text-wrap.

normal

Кілька пробілів підряд – перекриваються. Символи нового рядка у вихідному коді обробляються так само, як всі інші пробільні символи. Рядки розриваються так, як необхідно для заповнення їхніх рамок.

nowrap

Перекриває пробіли, як це робить значення normal, але нейтралізує розриви шеренги символів (переведення тексту на новий рядок), присутні у вихідному коді.

pre

Кілька пробілів підряд – зберігаються. Шеренги символів розриваються лише на символах нового рядка з вихідного коду та елементах <br>.

pre-wrap

Кілька пробілів підряд – зберігаються. Шеренги символів розриваються лише на символах нового рядка, <br> і тоді, коли необхідно заповнити рядкові рамки.

pre-line

Кілька пробілів підряд – перекриваються. Шеренги символів розриваються на символах нового рядка, на <br> і тоді, коли необхідно заповнити рядкові рамки.

break-spaces

Логіка, ідентична до логіки pre-wrap, окрім того, що:

  • Пробіли підряд завжди займають місце, в тому числі в кінці шеренги.
  • Точка розриву шеренги стоїть після кожного збереженого символу пробілу, в тому числі між двома символами пробілу.
  • Такі збережені проміжки займають простір і не повисають, чим впливають на природний розмір рамки (розміри min-content і max-content).

Наступна таблиця підсумовує логіку різних значень white-space – ключових слів:

Символи нового рядка Пробіли й табуляції Переходи на новий рядок Пробіли-термінатори Пробіли-термінатори інші пробіли-відділювачі
normal Перекриваються Перекриваються Перехід на новий рядок Прибираються Повисають
nowrap Перекриваються Перекриваються Без переходу на новий рядок Прибираються Повисають
pre Зберігаються Зберігаються Не працюють Зберігаються Без переходу на новий рядок
pre-wrap Зберігаються Зберігаються Перехід на новий рядок Повисають Повисають
pre-line Зберігаються Перекриваються Перехід на новий рядок Прибираються Повисають
break-spaces Зберігаються Зберігаються Перехід на новий рядок Перехід на новий рядок Перехід на новий рядок

Табуляція усталено відповідає 8 пробілам, але може бути налаштована за допомогою властивості tab-size. У разі значень normal, nowrap і pre-line кожна табуляція перетворюється на символ пробілу (U+0020).

[!NOTE] Є різниця між пробілами та іншими пробільними розділювачами. Ці групи визначені наступним чином:

пробіли

Пробіли (U+0020), табуляції (U+0009) та сегментні розриви (як то символи нового рядка).

інші пробільні розділювачі

Вся решта пробільних розділювачів, визначених в Unicode, окрім зазначених вище як пробіли.

Там, де вказано, що пробіл повисає, таке висіння може вплинути на розмір рамки при визначенні її природних розмірів.

Перекриття пробілів

Сторінка властивості white-space-collapse пояснює браузерний алгоритм перекриття пробілів.

Формальне визначення

Формальний синтаксис

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

Приклади

Базовий приклад

code {
  white-space: pre;
}

Розриви рядка всередині елементів <pre>

pre {
  white-space: pre-wrap;
}

У дії

Контроль перенесення в таблицях

HTML

<table>
  <tr>
    <td></td>
    <td>Дуже довгий вміст, що розривається</td>
    <td class="nw">Дуже довгий вміст, що не розривається</td>
  </tr>
  <tr>
    <td class="nw">white-space:</td>
    <td>normal</td>
    <td>nowrap</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

Результат

Кілька ліній у елементі SVG text

Властивість CSS white-space може бути використана для створення кількох рядків у елементі <text>, який усталено не має перенесення тексту.

HTML

Текст всередині елемента <text> потрібно розбити на кілька рядків, щоб були виявлені символи нового рядка. Після першого рядка решта не повинні мати пробілів.

<svg viewBox="0 0 320 150">
  <text y="20" x="10">Це абзац українською мовою,
який розбитий на кілька ліній
у вихідному коді, щоб його було
легше читати та редагувати
у текстовому редакторі.</text>
  </text>
</svg>

CSS

text {
  white-space: break-spaces;
}

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
white-space
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 5.5
Opera Full support 4
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
break-spaces
Chrome Full support 76
Edge Full support 79
Firefox Full support 69
Internet Explorer No support Ні
Opera Full support 62
Safari Full support 13.1
WebView Android Full support 76
Chrome Android Full support 76
Firefox for Android No support Ні
Opera Android Full support 54
Safari on iOS Full support 13.4
Samsung Internet Full support 12.0
nowrap
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 5.5
Opera Full support 4
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
pre
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 4
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
pre-line
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 8
Opera Full support 9.5
Safari Full support 3
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
pre-wrap
Chrome Full support 1
Edge Full support 12
Firefox Full support 3
Internet Explorer Full support 8
footnote
Opera Full support 8
Safari Full support 3
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Support in SVG
Chrome No support Ні
Edge No support 12 –  79
Firefox Full support 36
Internet Explorer Full support 10
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 36
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
Support on <textarea>
Chrome Full support 1
Edge Full support 12
Firefox Full support 36
Internet Explorer Full support 5.5
Opera Full support 4
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 36
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також