<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: momospace;
  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 (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }
  
  return result;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.