CSS hyphens — перенос слів зі знаком дефіса

HTML

<p lang="uk" class="none">Найхарактеристичніші словосполучення випробовують вузьку колонку.</p>
<p lang="uk" class="auto">Найхарактеристичніші словосполучення випробовують вузьку колонку.</p>

CSS

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

.none { hyphens: none; }
.auto { hyphens: auto; }

HTML

<ul>
  <li><code>none</code>
    <p lang="en" class="none">An extreme&shy;ly very looo&shy;ooong word</p>
  </li>  
  <li><code>manual</code>:
    <p lang="en" class="manual">An extreme&shy;ly very looo&shy;ooong word</p>
  </li>
  <li><code>auto</code>:
    <p lang="en" class="auto">An extreme&shy;ly very looo&shy;ooong word</p>
  </li>
</ul>

CSS

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul li {
	display: inline-block;
	margin: 36px;
}
	
p { 
  width: 45px;
  padding: 2px;
  font-size: 17px;
  border: 4px solid #666;
}

p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

HTML

<div class="cols">
    <div>
        <b>hyphens: none</b>
        <p lang="uk" class="none">Наша електро&shy;енцефало&shy;графія показала неспо&shy;діваний результат.</p>
    </div>
    <div>
        <b>hyphens: manual</b>
        <p lang="uk" class="manual">Наша електро&shy;енцефало&shy;графія показала неспо&shy;діваний результат.</p>
    </div>
    <div>
        <b>hyphens: auto</b>
        <p lang="uk" class="auto">Наша електроенцефалографія показала несподіваний результат.</p>
    </div>
</div>

CSS

body {
    font-family: Georgia, serif;
    font-size: 16px;
    padding: 16px;
}

.cols {
    display: flex;
    gap: 16px;
}

.cols > div {
    width: 150px;
}

b {
    font-family: monospace;
    font-size: 12px;
    color: #666;
}

p {
    text-align: justify;
    border: 1px solid #ccc;
    padding: 6px;
    margin-top: 6px;
}

.none {
    -webkit-hyphens: none;
    hyphens: none;
}

.manual {
    -webkit-hyphens: manual;
    hyphens: manual;
}

.auto {
    -webkit-hyphens: auto;
    hyphens: auto;
}

HTML

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

<select id="form">
  <option value="none" name="value2" selected>none</option>
  <option value="manual" name="value2">manual</option>
  <option value="auto" name="value2">auto</option>
</select>

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

<hr>

<p id="block">An extreme&shy;ly very looo&shy;ooong word</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;
  background: gold;
  width: 50px;
  padding: 6px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

JS

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

var textArray = { 'none': 'Перенесення не відбувається, навіть якщо рядок не вміщається у контейнері.',
  'manual': 'Перенесення відбувається лише коли у тексті наявні спеціальні символи, які явно вказують на можливість перенесення.',
  'auto': 'Браузер автоматично вирішує можливість перенесення слів.' };

form.onchange = function change() {

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