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

css-свойство text-align-last (от англ. text align last – выравнивание текста в конце) используется для горизонтального выравнивания строчного содержимого последней строки в блочных элементах.

Характеристики

Значение по умолчанию: auto.
Применяется: к блочным элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.textAlignLast="value".

Синтаксис

Значения

auto – текст последней строки будет выравниваться в зависимости от значения свойства text-align, за исключением случая text-align: justify, когда текст будет выравниваться по левому краю.
left – текст последней строки будет выравниваться по левому краю.
right – текст последней строки будет выравниваться по правому краю.
center – текст последней строки будет выравниваться по центру.
justify – текст последней строки будет растягиваться на всю ширину родительского элемента.
start – аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end – аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-text-align-last

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/text-align-last

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 390px;
		margin: 3em;
		}
				
		.p_1{
		text-align: left;
		text-align-last: right;
		background-color: yellow;
		}
		
		.p_2{
		text-align: justify;
		text-align-last: center;
		background-color: blue;
		}
		
		.p_3{
		text-align-last: justify;
		background-color: green;
		}
		
		.p_4{
		text-align: right;
		text-align-last: auto;
		background-color: blue;
		}		
		
		.p_5{
		text-align: justify;
		text-align-last: auto;
		background-color: yellow;
		}		
		
	</style>
	
</head>
<body>

	<p class="p_1">
		text-align: left; text-align-last: right;
		Текст выравнивается по левому краю.
		Текст последней строки выравнивается по правому краю.
	</p>
	
	<p class="p_2">
		text-align: justify; text-align-last: center;
		Текст растягивается по ширине абзаца.
		Текст последней строки выравнивается по центру.
	</p>
	
	<p class="p_3">
		text-align-last: justify;
		Текст последней строки растягивается по ширине абзаца. 
	</p>
	
	<p class="p_4">
		text-align: right; text-align-last: auto;
		Текст выравнивается по правому краю.
		Текст последней строки также выравнивается по правому краю.
	</p>
	
	<p class="p_5">
		text-align: justify; text-align-last: auto;
		Текст растягивается по ширине абзаца.
		Текст последней строки выравнивается по левому краю.
	</p>	
	
</body>
</html>

Пример №1