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
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
The following table will show you the current browser support for the CSS text-align-last
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 47 | 49 | 34 | 16 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
47 | 49 | 34 | 16 | 5 | 47 |
Last updated by CSSPortal on: 2nd January 2024