Key Takeaways
- The CSS text-align-last property allows developers to specify the alignment of the last line of a block or the line before a forced line break, improving the overall look of a website. It supports seven values: left, right, center, justify, start, end, and auto.
- There are certain considerations when using this property. For example, for languages read from left to right (LTR), using the ‘start’ value will align the text to the left, while ‘end’ will align it to the right. This is reversed for right-to-left (RTL) languages. Also, if a paragraph only has one line, the text-align-last property will take precedence over the text-align property, unless an explicit first-line alignment is specified.
- Despite the text-align-last property’s overall browser support of 61.85%, it is not supported by Safari. However, users with unsupported browsers will not notice any difference. It can be enabled using the “Enable Experimental Web Platform Features” in Chrome and Opera from version 35 and 22 onward respectively.
Sometimes tiny details that mostly go unnoticed can make or break the user experience. This can include subtle text shadows applied to a headline or proper spacing between different elements on a web page.
The text-align-last
property is useful in this respect. It specifies how either the last line of a block or the line right before a forced line break will be aligned. This is important because the last line in a paragraph generally doesn’t have enough text to fill up the entire space. You may or may not notice the changes but it will improve the overall look of your website.
This tutorial will cover all the aspects of the text-align-last
property including acceptable values, support and browser specific behavior.
Usage and Possible Values
It is pretty simple to use text-align-last
in your projects. Here is a basic snippet to align the last line of text to the right:
.intro-graph {
text-align: justify; // Required for IE and Edge
text-align-last: right;
}
This property has seven possible values. You are probably familiar with the usual left
, right
and center
values. They align the text in the last line to the left, right and center of the container.
The following demo shows the differences between these three values:
See the Pen text-align-last — Example 1 by SitePoint (@SitePoint) on CodePen.
The fourth value, justify
, aligns the last line in such a way that the text aligns its left and right edges to the left and right edges of the container. This is achieved by inserting an appropriate amount of space between words when necessary. Depending on the amount of text, you can use this property to completely fill the space on the last line without too much gap between words. The text in the second paragraph is also justified but since the last line only contains one word it is aligned to the left.
See the Pen text-align-last — Example 2 by SitePoint (@SitePoint) on CodePen.
While left aligning the last line of text works for languages that are read from Left to Right (LTR), it will be wrong to do so with RTL languages. In such cases, assigning the values left
or right
can cause issues when you don’t know the language to be used beforehand.
Fortunately, you can use the keyword start
to align the text to the starting position of a line based on the direction of text. This implies that setting text-align-last
to start
will left align the text of LTR languages and right align the text of RTL languages. Similarly, you can use the value end
to align the text to the ending position of a line based on the direction of text. This will right align the text of LTR languages and left align the text of RTL languages.
See the Pen text-align-last — Example 3 by SitePoint (@SitePoint) on CodePen.
The default value for this property is auto
. In this case, the text inside the last line is aligned using the value of the text-align
property unless text-align
is set to justify
. When set to justified
, the text is justified only if the value of the text-justify
property is set to distribute
. Otherwise, the text is start aligned.
Noteworthy Points
The spec says the property requires text-align
to be set to justify
for text-align-last
to work. However, only IE and Edge seem to implement this rule. The property works in both Firefox and Chrome without setting text-align
to justify
. The following demo should have all the text aligned to the right in Edge and IE. On other browsers, the last lines will be aligned based on the value of text-align-last
and rest of the lines will be right aligned.
See the Pen text-align-last — Example 4 by SitePoint (@SitePoint) on CodePen.
You might feel that the results are not as appealing as those achieved by setting text-align
to justify
. So, in most of the cases you will probably justify
the text anyway.
The property still works even if the line break is forced by, let’s say, a <br>
tag or something like that. You should also keep in mind that this property will align all the last lines of text inside the specified element and not just the absolute last line of content. For instance, if the text inside an article
or div
element has 3 paragraphs, each of them will have their last line aligned based on text-align-last
.
If you intend to just align the absolute last line of your content, then depending on the situation, you can use the :last-child
or :last-of-type
selector. Take the code from the demo below as an example:
article {
text-align: justify;
}
article p:last-of-type {
text-align-last: right;
}
It aligns the last line of the last paragraph in our article to right. Rest of the lines are aligned based on the value of text-align
property.
See the Pen text-align-last — Example 5 by SitePoint (@SitePoint) on CodePen.
Similarly, you can also use other selectors like :even
and :odd
to change alignment alternately.
Occasionally, you will have some content where the last line and the first line of a paragraph are same. In other words, the paragraph has just one line. In this case, if you have specified values for both the text-align
as well as the text-align-last
property, the text-align-last
property will take precedence. The only exception is when text-align
specifies an explicit first-line
alignment using the value, ‘start end’ .
Consider the code snippet below:
p {
text-align: justify;
}
p:nth-of-type(2) {
text-align-last: left;
}
If the second paragraph, in this case, has just one line then the text would be left aligned instead of being justified because text-align-last
will take precedence. The demo below shows the CSS above in action along with two other examples.
See the Pen text-align-last — Example 6 by SitePoint (@SitePoint) on CodePen.
Browser Support
After covering all the important aspects of this property, let’s discuss browser support. The support for this property can be enabled using the “Enable Experimental Web Platform Features” in both Chrome and Opera from version 35 and 22 onward respectively. It is fully supported by Chrome and Opera from version 47 and 34 onward.
To use this property in Firefox, you will have to use the -moz-
prefixed version. The values start
and end
are not supported by Internet Explorer. However, Edge fully supports this property. One notable browser that does not support text-align-last
at all is Safari. You can read more about browser support here.
With the overall support of 61.85%, it won’t hurt to start using this property. Users with unsupported browsers are not going to notice any difference.
Conclusion
While you can use the text-align-last
to properly align the text in your article, another interesting use case is to properly align the multi-line captions of your images. If you have some other use cases of this property in mind or have any questions, please share them with us in the comments.
Frequently Asked Questions about CSS Text-Align-Last Property
What is the CSS text-align-last property?
The CSS text-align-last property is a unique feature in CSS that allows you to control the alignment of the last line of a block element or a line right before a forced line break. This property is particularly useful when you’re working with justified text and you want to specify how the last line should be aligned. It can take values such as ‘auto’, ‘start’, ‘end’, ‘left’, ‘right’, ‘center’, ‘justify’, and ‘match-parent’.
How does the ‘auto’ value work in the text-align-last property?
When you set the value of the text-align-last property to ‘auto’, the last line of the text block or the line before a forced line break will be aligned based on the value of the ‘text-align’ property. If ‘text-align’ is set to ‘justify’, the ‘auto’ value will behave like ‘start’.
What does the ‘match-parent’ value do in the text-align-last property?
The ‘match-parent’ value in the text-align-last property makes the last line of the text block or the line before a forced line break align in the same way as the parent element. This is particularly useful when you want to maintain the same alignment style throughout the text block.
Can I use the text-align-last property with flex containers?
No, the text-align-last property does not apply to flex containers. It only works with block elements or lines before a forced line break.
How does the text-align-last property affect right-to-left (RTL) languages?
For right-to-left languages, the ‘start’ value aligns the last line to the right, while the ‘end’ value aligns it to the left. This is the opposite of what happens with left-to-right languages.
Is the text-align-last property supported in all browsers?
The text-align-last property is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer.
How can I use the text-align-last property to center the last line of a text block?
To center the last line of a text block, you can set the value of the text-align-last property to ‘center’. This will align the last line of the text block or the line before a forced line break to the center of the block.
What happens if I don’t specify a value for the text-align-last property?
If you don’t specify a value for the text-align-last property, it will default to ‘auto’. This means the alignment of the last line will be based on the value of the ‘text-align’ property.
Can I use the text-align-last property with inline elements?
No, the text-align-last property only applies to block elements or lines before a forced line break. It does not apply to inline elements.
How can I use the text-align-last property to justify the last line of a text block?
To justify the last line of a text block, you can set the value of the text-align-last property to ‘justify’. This will stretch the last line of the text block or the line before a forced line break to fill the block with space between words.
I am a front-end developer who has a keen interest in working with various libraries and reading about latest developments in my field. I also publish a list of most popular web development articles of the week every Tuesday on the website Freadio.