text-align-last: Controlling the Last Line in Justified Text

1. The typical bug: the last line stays left-aligned even though centering was intended

A recurring pattern in support forums and bug tickets looks like this: a developer sets text-align: justify on a paragraph and expects the last line to appear centered, or at least visually balanced too, since justify sounds like it means alignment. Instead, the last line stubbornly stays left-aligned while every previous line is cleanly stretched to the right edge. This is not a bug, it is the spec-compliant default behavior of text-align: justify.

The reason for this behavior lies in the definition of justified text itself: only complete lines, which need to fill the full available line width, get stretched. A paragraph's last line is by definition incomplete, it ends wherever the text ends, not at the right edge. Without an explicit instruction, the browser therefore treats it like normal, left-aligned text. Once this behavior is understood, text-align-last stops looking like a special case and instead reads as the necessary complement, without which justified text on the web would stay incomplete.

2. Recapping the default behavior of text-align: justify

For multi-line text, text-align: justify distributes word spacing, and depending on the language also letter spacing, so that every complete line reaches exactly from the left to the right edge of the container. This behavior is familiar from newspaper layouts and books and produces a clean, block-shaped visual edge on both sides of the text.

Because text-align: justify only defines the behavior of complete lines, it is consistent from a spec standpoint that a dedicated property exists for the last, incomplete line. text-align-last complements text-align rather than replacing it, both properties work independently on different parts of the same paragraph.

3. The syntax of text-align-last: available values

text-align-last accepts the same base values as text-align: left, right, center, justify, plus the writing-direction-aware values start and end. The default value auto follows the regular behavior, usually left-aligned in Western, left-to-right languages.

If text-align-last: justify is set explicitly, the last line gets stretched to the right edge like every other line too, which can create very large, unattractive word gaps on short last lines. In practice, center and right are therefore the more commonly desired choices for the last line rather than full justification.

p.justified {
  text-align: justify;
  text-align-last: center; /* last line centered instead of left-aligned */
}

p.justified-full {
  text-align: justify;
  text-align-last: justify; /* last line fully stretched too */
}

4. Example: a centered last line in justified text

The most common use case is exactly the one described at the start: a justified paragraph whose last line should be deliberately centered instead of staying left-aligned. With just one extra declaration, this desired behavior can be achieved without splitting the paragraph into a separate element for the last line or resorting to JavaScript.

This combination fits especially well for short, concise paragraphs like announcement copy or editorial teasers, where a visually balanced closing is desired while the preceding lines still keep the clean, straight justified edge often preferred in editorial layouts.

.editorial-teaser {
  text-align: justify;
  text-align-last: center;
  max-width: 42rem;
  line-height: 1.6;
}

5. Use case: centered quotes and pull quotes

For pull quotes, the visually highlighted quote excerpts in articles, a fully centered look for the entire quote is often desired. If the quote spans multiple lines and should still look cleanly aligned, combining text-align: justify with text-align-last: center merges the even edge alignment of the upper lines with a centered, visually calm ending for the last line.

Alternatively, some editorial teams set text-align: center directly, without justification, for short single-line quotes, because text-align-last has no effect on single-line paragraphs, there simply are no preceding complete lines for the difference between text-align and text-align-last to apply to.

6. Use case: price lists and table-like text blocks

In price lists or order summaries implemented as flowing text instead of an HTML table for layout reasons, a total or final amount is often meant to appear right-aligned in the last line, while the rest of the text stays left-aligned or justified. text-align-last: right achieves exactly that, without extracting the total line into a separate, additionally positioned element.

This technique is especially useful in email templates, where complex flexbox or grid layouts often do not work reliably across every email client, while text-align-last, as a simple, well-supported CSS property, still applies reliably even in more restrictive email rendering environments.

.order-summary p {
  text-align: left;
}

.order-summary .total-line {
  text-align: justify;
  text-align-last: right; /* total amount right-aligned */
  font-weight: 700;
}

7. Interaction with RTL languages and the direction property

In languages with right-to-left writing direction, such as Arabic or Hebrew, the meaning of left and right is inverted relative to visual perception, which is why the writing-direction-aware values start and end are almost always the better fit for international projects than hardcoded left or right values.

Set on a container with direction: rtl, the browser automatically translates text-align-last: end to the correct edge for that writing direction, without needing separate CSS rules per language direction. For multilingual online shops serving both European and Arabic-speaking store views, that is a direct maintenance advantage over physical direction values. For internationally run shops with mixed store views, that maintenance advantage adds up quickly across dozens of templates.

8. Common mistake: confusing it with text-align, and debugging tips

The most common mistake when debugging this behavior is fiddling exclusively with the text-align declaration, assuming a different value there would also change the last line's behavior. Because both properties work independently, changing text-align has no effect at all on the last line as long as text-align-last is not also adjusted.

A reliable debugging step is to test-insert a second, shorter paragraph with the same styles: if its single line stays left-aligned despite text-align: justify being set, that confirms the default value auto of text-align-last as the cause, and the fix is a targeted, explicit addition of that property, not another adjustment to text-align.

/* Wrong: only text-align adjusted, last line stays left */
.wrong {
  text-align: justify;
}

/* Correct: text-align-last set explicitly */
.correct {
  text-align: justify;
  text-align-last: center;
}

9. Browser support and a practical assessment

Compared to most other advanced typography properties, text-align-last counts as a solid, broadly supported feature that works reliably across all common modern browsers. An extra fallback is therefore not necessary in most projects, making the property one of the more pragmatic solutions in this area.

Combined with hyphens and a carefully chosen column width, a complete, production-ready justified-text setup emerges, where both hyphenation and the last line's behavior are controlled explicitly and deliberately, instead of relying on implicit browser defaults that can behave unexpectedly depending on context. Combining these building blocks deliberately from the start avoids later surprises once editors add longer technical terms or foreign-language passages.

10. Summary

11. FAQ: text-align-last: The Essentials at a Glance