The text-align-last property specifies how the last line of a block or the line just before a forced line break is aligned. A forced line break can be the end of a paragraph or a line break caused by a br tag.
CSS
text-align-last: value;
Values
left : Aligns the content to the left edge of the line box.
right : Aligns the content to the right edge of the line box.
center : Horizontally centers the content within the line box.
justify : Browser adjusts spacing in the text so that it starts from the left edge of the element and ends at the right edge.
start : Specifies that the content is aligned to the starting edge of the line box. In simple words, it is the same as left if the direction is left-to-right and right if the direction is right-to-left.
end : Specifies that the content is aligned to the ending edge of the line box. In simple words, it is the same as right if the direction is left-to-right and left if the direction is right-to-left.
auto : The content is aligned as per the text-align value. If the text-align value is justify, then the content is aligned the way it does on setting text-align-last value as start.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Examples
See the Pen text-align values by Aakhya Singh (@aakhya) on CodePen.
Observe the behaviour of the last line of all the four paragraphs in the above example. Giving no text-align-last value is equivalent to giving text-align-last: auto. So in the above example, the last line got aligned depending on the text-align value for the first three paragraphs. Since the forth paragraph is given text-align: justify, so the last line of the paragraph got aligned as if it was given text-align-last: start.
Another example is given below.
See the Pen text-align-last examples by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in newer versions of Chrome, Firefox, IE and Edge. IE does not support the values start and end. Use the -moz- prefix for better browser support.
