text-align-last
Overview
The text-align-last property adjusts the alignment of the last line of a block element or the line just before a forced line break. It could prove useful when handling justified text, offering distinct alignment options for the final line that may differ from the rest of the text block.
Examples and Usage
In the example below, we apply different text-align-last values to a paragraph. We start by setting text-align to justify and text-align-last to auto. Then, we'll sequentially apply center, end, and justify values and discuss their effects.
HTML Structure
<p>
In Arrow Functions, the return statement is implicit when the body of the function consists of a single expression. In such cases, you don't need to use the return keyword, and the expression itself will be returned by the function.
</p>
CSS Styling
p {
font-size: 1.2em;
text-align: justify;
text-align-last: auto; /* Behaves as 'start' when 'text-align' is 'justify' */
}
With text-align-last set to auto, the last line alignment follows the text-align value. However, since text-align is set to justify, the auto value behaves as if text-align-last is start.
Now, let's apply other values.
text-align-last: center; /* Centers last line */
text-align-last: end; /* Aligns last line to the right in LTR, left in RTL */
text-align-last: justify; /* Adjusts text spacing for line box edge alignment */
If we apply these values to the paragraph, the center value would center-align the last line, end would align it to the right for left-to-right direction (and to the left for right-to-left direction), and justify would adjust the text spacing so that the start and end of the last line align with the line box edges.
Values
The text-align-last property accepts the following values:
| Value | Description |
|---|---|
auto | The affected line is adjusted according to the text-align value unless it's justify; then it behaves as if text-align-last is start. |
start | Adjusts alignment to the left if direction is left-to-right, and to the right if it's right-to-left. |
end | Adjusts alignment to the right if direction is left-to-right, and to the left if it's right-to-left. |
left | Aligns the inline content to the left edge of its containing line box. |
right | Aligns the inline content to the right edge of its containing line box. |
center | Aligns the inline content centrally within the line box. |
justify | Adjusts word spacing so that the inline content lines up with the left and right edges of the line box. |
Associated Properties
text-aligntext-justify
Tips and Tricks
Justifying a single word line with
text-align-last: justifywill have no visible effect as there is no additional space to distribute.Note that when
text-alignis set tojustifyandtext-align-lasttoauto, the behavior is as iftext-align-lastis set tostart.If you're working with multilingual websites, be mindful that
text-align-last: startandtext-align-last: endwill behave differently based on the text direction. In right-to-left languages like Arabic or Hebrew,startaligns the last line to the right, whileendaligns it to the left.
Browser Compatibility
Older versions of Firefox (12-48), require vendor prefixes for proper functioning. IE supports text-align-last when text-align is set to justify, and has no support for the start and end values. For a more detailed breakdown, refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes* | Yes* | Yes* | Partial* |
Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.
Useful Resources
W3C's Working Draft of CSS Text Module Level 3: text-align-last