text-align-last | Справочник CSS
http://belarusweb.net
Основы создания сайтов

text-align-last

Описание

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

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

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

Синтаксис

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

Значения

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

Ссылки

Примеры

HTML Результат BwCodes
<!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