BlogsDope image BlogsDope

CSS text-align-last

March 22, 2021 CSS TEXT 434

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.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).