CSS text-align-last Property
Example
Align the last line of text in three <div> elements:
div.a
{
text-align: justify; /* For Edge */
text-align-last: right;
}
div.b
{
text-align: justify; /* For Edge */
text-align-last: center;
}
div.c
{
text-align: justify; /* For Edge */
text-align-last: justify;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The text-align-last property specifies how to align the last line of a text.
Notice that the text-align-last property
sets the alignment for all last lines within the selected element. So, if you
have a <div> with three paragraphs in it, text-align-last
will apply to the last line of EACH of the paragraphs. To use text-align-last
on only the last paragraph in the container, you can use :last child, see
example below.
Note: In Edge prior 79, the text-align-last property only works on text that
has "text-align: justify".
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textAlignLast="right" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -moz- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| text-align-last | 47.0 | 5.5* | 49.0 12.0 -moz- |
Not supported | 34.0 |
*In Internet Explorer 11 (and earlier), the "start" and "end" values are not supported.
CSS Syntax
text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The last line is justified and aligned left | Demo ❯ |
| left | The last line is aligned to the left | Demo ❯ |
| right | The last line is aligned to the right | Demo ❯ |
| center | The last line is center-aligned | Demo ❯ |
| justify | The last line is justified as the rest of the lines | Demo ❯ |
| start | The last line is aligned at the beginning of the line (left if the text-direction is left-to-right, and right is the text-direction is right-to-left) | Demo ❯ |
| end | The last line is aligned at the end of the line (right if the text-direction is left-to-right, and left is the text-direction is right-to-left) | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Use text-align-last on only the very last line in the container:
div.b p:last-child {
text-align-last: center;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Text Alignment
HTML DOM reference: textAlignLast property
