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

<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>
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; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
5.5124749YesX
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
474749YesX5.0

Last updated by CSSPortal on: 2nd November 2019