CSS свойство text-align-last

Определение и применение

Свойство text-align-last задаёт выравнивание последней строки блока и строки перед принудительным разрывом. Оно работает и без text-align: justify.

Попробуйте значения text-align-last

Основной текст выровнен по ширине. Здесь отдельно меняется выравнивание последней строки.

Значение свойства

text-align-last: auto

HTML и CSS примера
HTML
<div class="demo-target">
  Изучаем CSS: оформление текста помогает читать и понимать страницу.
</div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  text-align: justify;
  text-align-last: auto;
}

Поддержка браузерами

Спецификация: CSS text

Поддерживается во всех основных браузерах с 2022 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.text-align-last
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
text-align-last✓47✓12✓49

Версия 49 выпущена в 2016 г.

Версия 12 выпущена в 2012 г. — Удалено в 53; Префикс -moz-

✓34✓16✓47✓49

Версия 49 выпущена в 2016 г.

Версия 14 выпущена в 2012 г. — Удалено в 53; Префикс -moz-

✓34✓16✓5.0✓47✓16
auto✓47✓12✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16
center✓47✓12✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16
end✓47✓79✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16
justify✓47✓12✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16
left✓47✓12✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16
match-parent××××✓16×××✓16××✓16
right✓47✓12✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16
start✓47✓79✓12✓34✓16✓47✓14✓34✓16✓5.0✓47✓16

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
text-align-last: auto | start | end | left | right | center | justify;

/* Глобальные значения */
text-align-last: initial | inherit | unset | revert | revert-layer;

| — выбор варианта.

JavaScript синтаксис:

JavaScript
element.style.textAlignLast = "center";

Начальное значение свойства

auto.

Значения свойства

Значения text-align-last
Значение Описание
auto Использует text-align, но при text-align: justify последняя строка выравнивается как start. При center она остаётся по центру; при rtl начало строки находится справа. Начальное значение.
left Последняя строка, либо строка перед принудительным разрывом выравниваются по левому краю.
right Последняя строка, либо строка перед принудительным разрывом выравниваются по правому краю.
center Последняя строка, либо строка перед принудительным разрывом выравниваются по центру.
justify Последняя строка, либо строка перед принудительным разрывом растягивается по ширине.
start Последняя строка, либо строка перед принудительным разрывом выравниваются по левому краю (аналогично значению left) если направление текста слева направо (CSS свойство direction, либо глобальный HTML атрибут dir со значением ltr). Последняя строка, либо строка перед принудительным разрывом выравниваются по правому краю (аналогично значению right) если направление текста справа налево (CSS свойство direction, либо глобальный HTML атрибут dir со значением rtl).
end Последняя строка, либо строка перед принудительным разрывом выравниваются по правому краю (аналогично значению right) если направление текста слева направо (CSS свойство direction, либо глобальный HTML атрибут dir со значением ltr). Последняя строка, либо строка перед принудительным разрывом выравниваются по левому краю (аналогично значению left) если направление текста справо налево (CSS свойство direction, либо глобальный HTML атрибут dir со значением rtl).
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для наследуемого свойства text-align-last наследует вычисленное значение у родительского элемента.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Сравните auto при center и justify: начальное значение не означает постоянное выравнивание влево.

Спецификация

CSS Text — спецификация text-align-last.

Наследуется

Да.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Последняя строка абзаца

Замените center на end. Сравните последнюю строку многострочного абзаца.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.sample {
    max-width: 280px;
    text-align: justify;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Последняя строка абзаца</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="sample first">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="sample second">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
  </body>
</html>
style.css
CSS
.first {
    text-align-last: start;
}
.second {
    text-align-last: center;
}

auto следует основному выравниванию

У A text-align: center, у B — justify. В обоих случаях text-align-last: auto: последняя строка A по центру, B — у начала. Замените auto на end или добавьте direction: rtl у B.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>auto следует основному выравниванию</title>
  </head>
  <body>
    <h3>A</h3>
    <p class="sample first">Достаточно длинный текст переносится на несколько строк. Последняя строка короче.</p>
    <h3>B</h3>
    <p class="sample second">Достаточно длинный текст переносится на несколько строк. Последняя строка короче.</p>
  </body>
</html>
style.css
CSS
.sample {
    width: 220px;
    max-width: 100%;
    border: 1px solid;
    text-align-last: auto;
}
.first {
    text-align: center;
}
.second {
    text-align: justify;
}