CSS text-justify — вирівнювання по ширині, justify

HTML

<div>Вузька колонка з вирівнюванням за шириною добре показує, як браузер розтягує проміжки між словами, аби обидва краї були рівними.</div>

CSS

div {
    width: 220px;
    text-align: justify;
    text-justify: inter-word;
}

HTML

<p>text-align: left</p>
<div class="col left" lang="uk">
    Довідник містить документацію властивостей та рекомендації щодо їхнього застосування.
</div>

<p>text-align: justify</p>
<div class="col just" lang="uk">
    Довідник містить документацію властивостей та рекомендації щодо їхнього застосування.
</div>

<p>justify + hyphens: auto</p>
<div class="col just hyp" lang="uk">
    Довідник містить документацію властивостей та рекомендації щодо їхнього застосування.
</div>

CSS

.col {
    width: 230px;
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid #666;
    font-size: 17px;
    background: #fbfbfb;
}

.left {
    text-align: left;
}

.just {
    text-align: justify;
    text-justify: inter-word;
}

.hyp {
    hyphens: auto;
}

HTML

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

<select id="form">
    <option value="none" name="value2">none</option>
  <option value="auto" name="value2" selected>auto</option>
  <option value="inter-word" name="value2">inter-word</option>
  <option value="inter-character" name="value2">inter-character</option>

</select>

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

<hr>

<p id="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ullam vel maxime delectus fuga quod doloribus atque quisquam tenetur fugit esse nulla dignissimos quis vero sit totam aliquam suscipit nam, vitae, eius, ratione ipsam ea exercitationem. Amet, illum. Quibusdam alias neque impedit veniam blanditiis reprehenderit doloremque, ratione odio perspiciatis voluptatum.</p>

CSS

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

body {
  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: justify;
  text-justify: none;
}

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

JS

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

var textArray = { 'none': 'Забороняє методи вирівнювання',
  'auto': 'Браузер самостійно визначає алгоритм вирівнювання.',
  'inter-word': 'Буде змінюватися інтервал між словами.',
  'inter-character': 'Збільшує / зменшує пробіл між символами' };

form.onchange = function change() {

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

HTML

<div>
  <p><code>text-justify: none;</code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p class="auto"><code>text-justify: auto;</code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

body {
	padding: 16px;
	font-size: 17px;
	color: #222;
	line-height: 1.45;
}

p {
  background-color: #eee;
  padding: 6px;
  text-align: justify;
  text-justify: none;
}

p > code {
  display: block;
  margin-bottom: 16px;
}

p.auto {
	text-justify: auto;
}