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 – ключових слів:

Табуляція усталено відповідає 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;
}

У дії

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей, цуратись
    насолоди і вихваляти страждання, я розкрию перед вами всю картину і
    роз'ясню, що саме говорив цей чоловік, який відкрив істину, якого я б назвав
    зодчим щасливого життя. Дійсно, ніхто не відкидає, не зневажає, не уникає
    насолод тільки через те, що це насолоди, але лише через те, що тих, хто не
    вміє розумно вдаватися насолоді, осягають великі страждання.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: rgb(220 220 220);
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

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

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;
}

Результат

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

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

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

• Властивості, котрі визначають те, як слова розриваються посередині: overflow-wrap, word-break, hyphens
• tab-size