CSS white-space — пробіли, переноси й нерозривний текст

CSS властивість white-space встановлює, як відображати пропуски між словами.

На прикладі, ми бачимо, що перший абзац показує текст, форматуючі всі пробіли до одного. А другий, маючи встановлену властивість white-space показує вже всі пробіли як і було записано у коді.

В HTML, зазвичай, будь-яка кількість пропусків показується як один. За винятком елемента <pre>, він текст виводить текст з усіма пропусками та перенесеннями рядків.

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

В таблиці нижче представлена дія значення властивості white-space на текст:

правити

Загальний опис

правити

Нотатка

У Firefox для <textarea> значення normal, nowrap, і pre сприймаються як pre-wrap.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Властивість white-space може отримувати 7 значень:

normal

Текст виводиться як зазвичай. Без задання.

автор: Svitlana

правити

nowrap

Імітує значення normal, але ігнорує переноси рядків, ввесь текст відображається одним рядком. Але додавання елемента `` переносить текст на новий рядок.

автор: Svitlana

правити

pre

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

автор: Svitlana

правити

pre-line

Декілька пропусків з'єднаються в один, браузер самостійно визначить де потрібно переновити текст на наступний рядок.

автор: Svitlana

правити

pre-wrap

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

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	5.5
normal	1.0	1.0	1.0	4.0	12.0	5.5
pre	1.0	1.0	1.0	4.0	12.0	6.0
nowrap	1.0		1.0	4.0	12.0	5.5
pre-wrap	1.0	3.0	3.0	8.0	12.0	8.0
pre-line	1.0	3.5	3.0	9.5	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
normal	1.0		1.0	1.0
pre	1.0		1.0	1.0
nowrap	1.0		1.0	1.0
pre-wrap	1.0		9.0	3.0
pre-line	1.0		10.0	3.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="no">Цей текст ніколи не переноситься, хоч би яким довгим був рядок.</p>
<p>А цей переноситься, як звичайно, щойно сягає краю блока.</p>

p {
    width: 220px;
    border: 1px solid #ccc;
}

.no {
    white-space: nowrap;
}

<p class="normal">normal:   три   пробіли   поспіль
і перенос рядка прямо в коді.</p>

<p class="prewrap">pre-wrap:   три   пробіли   поспіль
і перенос рядка прямо в коді.</p>

<p class="nowrap">nowrap: довгий рядок не переноситься й ховається під трьома крапками.</p>

p {
    width: 240px;
    padding: 6px;
    border: 1px solid #666;
}

.normal {
    white-space: normal;
}

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

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p>
p {
  color: green;
  text-transform: uppercase;
}
</p>

<p class="pre">
p {
  color: green;
  text-transform: uppercase;
}
</p>

body {
	font-family: monospace;
	font-size: 17px;
}

p.pre {
	white-space: pre;
}

<p>Вибери потрібне значення для <code>white-space</code>:</p>

<select id="form">
  <option value="normal" name="value2" selected>normal</option>
  <option value="nowrap" name="value2">nowrap</option>
  <option value="pre" name="value2">pre</option>
  <option value="pre-line" name="value2">pre-line</option>
  <option value="pre-wrap" name="value2">pre-wrap</option>
</select>

<p id="text">Текст виводиться як зазвичай. За замовчуванням.</p>

<hr>

<p id="block">
#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
}
</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

#text {
  height: 150px;
  background-color: #eee;
  padding: 16px 0;
}

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'normal': 'Текст виводиться як зазвичай. За замовчуванням.',
  'nowrap': 'Імітує значення normal, але ігнорує переноси рядків, ввесь текст відображається одним рядком.',
  'pre': 'Всі пропуски та переноси зберігаються. Якщо рядок виходить занадто довгим і не влазить у вікно браузера, то буде додана горизонтальна смуга прокрутки.',
  'pre-line': 'Декілька пропусків з\'єднаються в один, браузер самостійно визначить де потрібно переновити текст на наступний рядок.',
  'pre-wrap': 'Всі пропуски зберігаються, але якщо рядок по ширині не поміщається в задану область, то текст автоматично буде перенесений на наступний рядок.' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.whiteSpace = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js