CSS text-align-last — вирівняти останній рядок

HTML

<p>Цей абзац вирівняно за шириною, тож текст навмисно довгий — потрібно кілька рядків, щоб побачити, що останній рядок поводиться інакше за решту.</p>

CSS

p {
    text-align: justify;
    text-align-last: right;
}

HTML

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

<select id="form">
  <option value="left" name="value2" selected>left</option>
  <option value="center" name="value2">center</option>
  <option value="right" name="value2">right</option>
  <option value="justify" name="value2">justify</option>
</select>

<p id="text">Вирівнювання останнього рядку тексту по лівій стороні</p>

<hr>

<div id="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

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;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

#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 = { 'left': 'Вирівнювання останнього рядку тексту по лівій стороні',
  'right': 'Вирівнювання останнього рядку тексту по правій стороні',
  'center': ' 	Вирівнювання останнього рядку тексту по центру',
  'justify': 'Вирівнювання останнього рядку тексту по ширині. Текст розтянеться від лівого краю до правого (як в газетах і журналах).' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.textAlignLast = 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 class="text">text-align-last: right;</p>
  <p class="block right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus veritatis sapiente reprehenderit vel dignissimos laborum, optio dicta distinctio necessitatibus eaque.</p>
    <p class="text">text-align-last: left;</p>
  <p class="block left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus veritatis sapiente reprehenderit vel dignissimos laborum, optio dicta distinctio necessitatibus eaque.</p>
    <p class="text">text-align-last: center;</p>
    <p class="block center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus veritatis sapiente reprehenderit vel dignissimos laborum, optio dicta distinctio necessitatibus eaque.</p>
    <p class="text">text-align-last: justify;</p>
    <p class="block justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus veritatis sapiente reprehenderit vel dignissimos laborum, optio dicta distinctio necessitatibus eaque.</p>
</div>

CSS

div{
  padding: 20px;
}
.block {
  text-align: justify;
}
.right{
    text-align-last: right;
}
.left{
    text-align-last: left;
}
.center{
    text-align-last: center;
}
.justify{
    text-align-last: justify;
}
.text{
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

HTML

<p class="cap">1. text-align: justify — типовий останній рядок (auto):</p>
<p class="col j">Довгий абзац із кількох рядків тексту, вирівняний за шириною
    колонки, щоб було добре видно, як поводиться саме останній рядок.</p>

<p class="cap">2. text-align: justify + text-align-last: justify — останній рядок розтягнуто:</p>
<p class="col jj">Довгий абзац із кількох рядків тексту, вирівняний за шириною
    колонки, щоб було добре видно, як поводиться саме останній рядок.</p>

<p class="cap">3. text-align: left + text-align-last: right — justify не потрібен:</p>
<p class="col lr">Довгий абзац із кількох рядків тексту, вирівняний ліворуч,
    щоб було добре видно, як поводиться саме останній рядок.</p>

<p class="cap">4. Абзац з одного рядка — він і є останній:</p>
<p class="col one">Один короткий рядок</p>

<p class="cap">5. Рядок перед br теж вважається останнім:</p>
<p class="col lr">Перший рядок перед розривом<br>другий рядок після розриву</p>

CSS

.cap {
    margin: 16px 0 4px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

.col {
    width: 300px;
    margin: 0;
    padding: 6px 8px;
    background: #eef1f5;
    border-right: 3px solid #8a94a6;
    font: 14px/1.5 system-ui, sans-serif;
}

.j {
    text-align: justify;
}

.jj {
    text-align: justify;
    text-align-last: justify;
}

.lr {
    text-align: left;
    text-align-last: right;
}

.one {
    text-align: left;
    text-align-last: center;
}

HTML

<p>Цей абзац вирівняний по ширині, тому всі його рядки, крім останнього, розтягнуті на всю ширину блока. Останній рядок за замовчуванням лишався б ліворуч, але властивість притискає його праворуч.</p>

CSS

p {
  width: 320px;
  text-align: justify;
  text-align-last: right;
}