w3docs logo

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

CSS свойствоtext-align-last выравнивает последнюю строку текста.

Свойство text-align-last устанавливает выравнивание всех последних строк внутри указанного элемента. Если имеется <div> элемент с тремя параграфами, свойство text-align-last будет применено к последней строке каждого параграфа.

Данное свойство поддерживается с префиксом -moz- для Firefox 12-Firefox 48, а для Firefox 49-Firefox 65 поддерживается без префикса.
Значение по умолчанию auto
Применяется К блочным контейнерам.
Наследуется Да
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.textAlignLast = "left";

Синтаксис

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

Пример

 
<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      text-align: justify;
      -moz-text-align-last: right; /* For Firefox prior 58.0 */
      text-align-last: right;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-align-last</h2>
    <h3>text-align-last: right:</h3>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
    </div>
  </body>
</html>

Рассмотрим другой пример со значениями "start", "justify" и "center":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.example1 {
      text-align: justify; /* For Edge */
      -moz-text-align-last: start; /* For Firefox prior 58.0 */
      text-align-last: start;
      }
      div.example2 {
      text-align: justify; /* For Edge */
      -moz-text-align-last: center; /* For Firefox prior 58.0 */
      text-align-last: center;
      }
      div.example3 {
      text-align: justify; /* For Edge */
      -moz-text-align-last: justify; /* For Firefox prior 58.0 */
      text-align-last: justify;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-align-last</h2>
    <h3>Text-align-last: start:</h3>
    <div class="example1">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
    <h3>Text-align-last: center:</h3>
    <div class="example2">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
    <h3>Text-align-last: justify:</h3>
    <div class="example3">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Значения

Значение Описание
auto Последняя строка выравнивается по левому краю. Значение по умолчанию.
left Последняя строка выравнивается по левому краю.
right Последняя строка выравнивается по правому краю.
center Последняя строка выравнивается по центру.
justify Последняя строка выравнивается подобно остальным строкам.
start Последняя строка выравнивается по начальному краю (по левому краю, если направление текста слева направо, по правому краю, если направление текста справа налево).
end Последняя строка выравнивается по конечному краю (по правому краю, если направление текста слева направо, по левому краю, если направление текста справа налево).
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
47.0+ ✕ 49.0+
12.0-48.0 -moz- 		✕ 34.0+

Практикуйте свои знания

Какие значения могут быть установлены для свойства CSS 'text-align-last'?
Считаете ли это полезным?