CSS text-align-last property is used to align the last line of the text. The text can be aligned to the left, right, or center based on our requirements. See the example below:
Example:
.p1{
text-align-last: right;
}
.p2{
text-align-last: center;
}
.p3{
text-align-last: justify;
}
Remember, If you apply the text-align-last property to an element and it has few child elements, this property will affect the last line of each and every child element.
For example: Suppose, you have a <div> element and it has three <p> elements inside it. Now, you apply the text-align-last: right; property to the <div> element. The last line of each paragraph will align to the right.
If you want only the very last line to be affected, you can use the :last-child selector. See the example below:
Example:
.div1{
text-align-last: right;
}
.div2 p:last-child{
text-align-last: right;
}
CSS Syntax
The text-align-last property has the following syntax:
text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
Property Values
The text-align-last property accepts the following values:
| auto | The last line of the text is aligned to match the text-align property. This means, if the text-align property is set to right, the last line will be aligned to the right. If the text-align property is not set, the last line will align to the start. This is the default value. |
| left | Aligns the last line to the left. |
| right | Aligns the last line to the right. |
| center | Aligns the last line in the center. |
| justify | Inserts white space between the words to cover the full width of the line. |
| start | Aligns the last line at the beginning based on the direction of the text. Aligns to the left if the direction is ltr and right if the direction is rtl. |
| end | Aligns the last line at the end based on the direction of the text. Aligns to the right if the direction is ltr and left if the direction is rtl. |
| initial | Sets the text-align-last property to its default value(auto). |
| inherit | Inherits the text-align-last property from the parent element. |
General Info
| Default Value | auto |
| Inherited | Yes |
| JavaScript Usage | element.style.textAlignLast = “center” |
