CSS word-wrap (overflow-wrap) — перенос довгих слів

HTML

<p class="test">Superkalifragilisticexpialidocious ламається на межі блока.</p>
<p>Superkalifragilisticexpialidocious вилазить за рамку.</p>

CSS

p {
    width: 160px;
    border: 1px solid #ccc;
    padding: 6px;
}

p.test {
    word-wrap: break-word;
}

HTML

<p>без нічого</p>
<div class="col">
    Помилка: https://example.com/dovgyi-adresa-yaka-ne-vlizaye-v-kolonku-nikoly
</div>

<p>overflow-wrap: break-word</p>
<div class="col wrap">
    Виправлено: https://example.com/dovgyi-adresa-yaka-ne-vlizaye-v-kolonku-nikoly
</div>

CSS

.col {
    width: 220px;
    margin-bottom: 20px;
    padding: 8px;
    border: 2px solid #d24317;
    background: #fbfbfb;
}

.wrap {
    overflow-wrap: break-word;
    border-color: #398712;
}

HTML

<div>
  <code>Normal</code>
  <p>Ut enim ad minim veniam, quis nostrudnostrud nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatconsequatconsequatconsequat.</p>
</div>
<div class="word-break">
  <code>word-break</code>
  <p>Ut enim ad minim veniam, quis nostrudnostrud nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatconsequatconsequatconsequat.</p>
</div>
<div class="word-wrap">
  <code>word-wrap</code>
  <p>Ut enim ad minim veniam, quis nostrudnostrud nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatconsequatconsequatconsequat.</p>
</div>

CSS

div {
  width: 7em;
  background-color: #eee;
  color: #222;
  font-family: sans-serif;
  margin-right: 1.5em;
  float: left;
  padding: 6px;
  font-size: 19px;
  margin-left: 15%;
  margin-bottom: 20px;
}

code {
  text-align: center;
  display: block;
  color: #000;
}

.word-break {
  word-break: break-all;
}

.word-wrap {
  word-wrap: break-word;
}

HTML

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

<select id="form">
  <option value="normal" name="value2" selected>normal</option>
  <option value="break-word" name="value2">break-word</option>
</select>

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

<hr>

<p id="block">
Lorem ipsum dolor sit amet consectetur adipisiadipisicingadipisicingadipisicingcing elit. Doloribus magni exercitationem vitae corrupti nihil commodi earum fuga aliquid nisi voluptas, sapiente ipsa maiores error consectetur consequatur. Quia, aliquam? Similique, dolores?
</p>

CSS

* {
  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;
  width: 144px;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
  word-wrap: normal;
}

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

JS

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

var textArray = { 'normal': 'Рядки не переносяться або переносяться в тих місцях, де явно задане перенесення. В цьому випадку можливий вихід слів за межі контейнера.',
  'break-word': 'Перенесення рядків додається. Браузер самостійно визначить де перенести слово, щоб воно не вилізло за межі контейнера.' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.wordWrap = 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