CSS text-align-last Property

Description

The text-align-last property describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.

Initial value: auto
Applies to: Block containers
Inherited: Yes
Media: Visual
Computed value: Specified value
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.textAlignLast

Syntax

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

Values

autoText is aligned like the other lines in the object, using the value of the text-align property.
startThe same as left if direction is left-to-right and right if direction is right-to-left.
endThe same as right if direction is left-to-right and left if direction is right-to-left.
leftText is aligned to the left.
rightText is aligned to the right.
centerThe text is centered within the line box.
justifyThe text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

Example

HTML

<div class="test"> 

   <p>text-align-last: left;</p> Hedgehogs - the inhabitants of forests, steppes, deserts and cultivated landscapes.  They settle under the roots of trees, in dense shrubs, under stones, dig holes.  

</div> 

<div class="test2"> 

   <p>text-align-last: right;</p>Mostly omnivores, but prefer animal feed: invertebrates, amphibians, reptiles (hedgehogs are famous for their resistance to snake venom), carrion.  

</div> 

<div class="test3"> 

   <p>text-align-last: center;</p>These are mainly terrestrial animals, but many species climb and swim well.  During the year 1-2 season of reproduction;  outside their hedgehogs lead a solitary lifestyle.  

</div> 

<div class="test4"> 

   <p>text-align-last: justify;</p>Pregnancy lasts from 34 to 58 days;  in the litter from 1 to 7. In nature, many predators prey on hedgehogs: foxes, wolves, mongooses, ferrets, birds of prey (especially owls).

</div>

CSS

div { 
   display: inline-block;  
   width: 20%; 
   margin: 0% 2%; 
   text-align: justify; 
   vertical-align: top;
} 
.test { 
   text-align-last: left; 
} 
.test2 { 
   text-align-last: right;  
} 
.test3 { 
   text-align-last: center;
} 
.test4 { 
   text-align-last: justify; 
}

Result