CSS text-align-last Property Tutorial

In this section, we will learn what the text-align-last property is and how to use it in CSS.

Click here to run the example of text-align-last property.

CSS text-align-last Property Definition and Usage

In CSS, if you want to align a text horizontally, you can use the `text-align` property.

But sometimes we only want to horizontally align the last line of a paragraph! This is where we can use the `text-align-last` property.

Basically, this property focuses on the last line of a text paragraph and ignores the rest.

Note: if a container has two or more paragraphs in it, using this property on that container would affect the entire child paragraphs! So if you only want to horizontally adjust the last line of the last paragraph, you could use a child selector like `:last`.

CSS text-align-last Property Syntax

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

CSS text-align-last Property Value

  • Left: This value indicates that the text should be left-aligned.
  • Right: This value indicates that the text should be right-aligned.
  • Center: Using this value, we can center a text.
  • Justify: This value indicates that every text line in a paragraph, with the exception of the last line, should be set to take up the full width of the container element.
  • start: The last line adjusts to the beginning of that line; if the direction of the paragraph is left to right, then start would be “left” and if the direction of the paragraph is right to left, then the start would be “right”.
  • end: The last line adjusts to the end of that line; if the direction of the paragraph is left to right, then the end would be “right” and if the direction of the paragraph is right to left, then the end would be “left”.

Example: text-align-last in CSS

See the Pen text-align-last in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS text-align-last Property Work?

In this example, as you can see, the value of the text-align-last property is set to end for both paragraphs and so the two last-lines of both paragraphs aligned on the right side of their containers.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies