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

<select id="form">
  <option value="auto" name="value2" selected>auto</option>
  <option value="loose" name="value2">loose</option>
  <option value="normal" name="value2">normal</option>
  <option value="strict" name="value2">strict</option>
</select>

<p id="text"></p>

<hr>

<p id="block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa eos molestias eum tenetur itaque earum fuga repellendus. Debitis exercitationem error accusamus sunt magnam amet magni corporis rerum facilis, illo provident earum, temporibus maiores repellat animi dolorem at optio dolores hic libero velit? Dolores, ratione recusandae possimus voluptas autem quo velit!</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;
  line-break: auto;
}
var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

  var textArray = {'auto': 'Браузер автоматично визначає переривання рядків',
                   'loose': 'Розбиває текст з найменш обмежувальним набором правил розбиття. Це корисно для тих випадків, коли область вмісту є особливо вузькою, наприклад, при відображенні її в багатоколонному макеті.',
                   'normal': 'Розбиває текст, використовуючи найпоширеніший набір лінійних правил',
                   'strict': 'Розбиває текст, використовуючи найсуворіший набір лінійних правил.'};

form.onchange = function change() {
  
  var newVal = getNewValue();  
  block.style.textAlign = 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.