white-space

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

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

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

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

Примітка: Аби слова розривались посередині, слід натомість використати 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: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

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

Значення

normal

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

nowrap

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

pre

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

pre-wrap

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

pre-line

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

break-spaces

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

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

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

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

пробіли

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

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

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

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

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

Специфікація Тексту CSS містить розділ Перекриття та перетворення, котрий точно визначає значення вислову "пробіли перекриваються", включно з прикладом та ілюстрацією. Зазвичай це означає зведення кількох пробільних символів підряд до єдиного символу пробілу – хоч іноді воно означає зведення їх до нуля символів (порожнього рядка).

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

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

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

Приклади

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

code {
  white-space: pre;
}

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

pre {
  white-space: pre-wrap;
}

У дії

HTML

<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: 300px;
  padding: 16px;
  border-radius: 10px;
}

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

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

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

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

<p>
  Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей, цуратись
  насолоди і вихваляти страждання, я розкрию перед вами всю картину і роз'ясню,
  що саме говорив цей чоловік, який відкрив істину, якого я б назвав зодчим
  щасливого життя. Дійсно, ніхто не відкидає, не зневажає, не уникає насолод
  тільки через те, що це насолоди, але лише через те, що тих, хто не вміє
  розумно вдаватися насолоді, осягають великі страждання.
</p>

Результат

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

              <br />
              <small>
                  # white-space-property
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>