📝 CSS text-align-last — Complete Tutorial

🌐 What Is text-align-last?

The text-align-last property controls thealignment of the last line of a paragraph or block whentext-align affects the rest of the lines. It is especially useful for text that is justified or multi-line formatted.

>>“Use text-align-last when the last line of your paragraph needs different alignment from the rest.”

Note

✔ Works best with text-align: justify
✔ Affects only the last line
✔ Useful for typography, magazine layouts, and article formatting

📦 Syntax

text-align-last syntax

text-align-last: auto | left | right | center | justify | start | end;

📌 Values Explained

ValueDescription
autoDefault; follows the text-align value.
leftAlign last line to the left.
rightAlign last line to the right.
centerCenter the last line.
justifyForce the last line to stretch fully across the width.
startAlign according to writing direction (LTR → left).
endAlign opposite to writing direction.

📌 1. Basic Example

Simple usage

p {
  text-align: justify;
  text-align-last: center;
}

The paragraph’s main lines are justified, but the last line is centered.

📌 2. Align Last Line to the Right

Right-align last line

p {
  text-align: justify;
  text-align-last: right;
}

Perfect for signatures, quotes, authorship text, etc.

📌 3. Force Justified Last Line

Full justify last line

p {
  text-align: justify;
  text-align-last: justify;
}

The last line expands to take up full width — magazine-style formatting.

📌 4. Using text-align-last Without Justification

Works with other alignment

p {
  text-align: left;
  text-align-last: right;
}

Even if the paragraph is left aligned, the last line becomes right-aligned.

📌 5. RTL (Right-to-Left) Compatibility

RTL example

p {
  direction: rtl;
  text-align: justify;
  text-align-last: start;
}

start aligns to the right in RTL languages.

📌 6. Styling Headings with a Special Last Line

Heading multi-line effect

h1 {
  width: 300px;
  text-align: center;
  text-align-last: left;
}

Creates visually interesting headline formatting.

🧪 Real-World Examples

1️⃣ Article Paragraph Formatting

Magazine style

article p {
  text-align: justify;
  text-align-last: left;
}

2️⃣ Special Alignment for Quotes

Quote formatting

blockquote {
  text-align: justify;
  text-align-last: right;
}

3️⃣ Align Author Name on Last Line

Author credit

.author {
  text-align: justify;
  text-align-last: end;
}

⚠️ Common Mistakes

  • ❌ Assuming it only works with justified text (it works with all alignments)
  • ❌ Forgetting that it affects only the last line
  • ❌ Using it on single-line text (no effect)

Note

Use this property only when your element has multiple text lines.

🔥 Summary

text-align-last provides fine control over how the final line of a text block is aligned. It’s especially useful for article layouts, quotations, headings, and RTL typography.

>>“Typography is detail — and text-align-last gives detail to the last line.”

Learn more →MDN Docs 📘