CSS text-align-last Property

Description

The text-align-last CSS property is used to control the alignment of the last line of text within a block-level element. This property is particularly useful when dealing with justified text, where the text is stretched to fill the entire width of the container. By using text-align-last, you can specify whether the last line of text should be aligned to the left, right, center, or justified within the block, independent of the alignment applied to the rest of the text. It helps in achieving more visually pleasing and consistent text layouts, especially in situations where the last line may be shorter than the others.

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

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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

Editor