🎯 CSS text-align-last — Aligning the Last Line with Precision

The text-align-last property is a lesser-known CSS tool that lets you control the alignment of the last line of a paragraph or block of text — independently from the rest of the text.

---

🔹 What Is text-align-last?

The text-align-last property sets the horizontal alignment of the last line in a block or paragraph, particularly when text-align: justify is used.

Why it’s useful:

• Prevents awkward alignment in justified paragraphs
• Gives typographic control over callouts, headings, or multi-line buttons

---

📘 Syntax

selector {
  text-align: justify;
  text-align-last: left | right | center | justify | start | end;
}

---

💡 Values Explained

Value	Description
left	Align the last line to the left
right	Align the last line to the right
center	Center the last line
justify	Justify the last line like the others
start	Align based on the direction (LTR: left, RTL: right)
end	Align opposite the start (LTR: right, RTL: left)

---

✍️ Example: Justify With a Centered Last Line

<p class="justify-last">
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</p>

.justify-last {
  width: 400px;
  text-align: justify;
  text-align-last: center;
}

🧠 Result:

• All lines are justified.
• The last line is centered, instead of stretched.

---

🖼️ Image Idea: Visualizing text-align-last

Image Description:

• A block of text with the last line:
  • Left-aligned
  • Right-aligned
  • Centered
  • Justified

🎯 Purpose: Show how text-align-last affects the final line when everything else is justified.

---

🧠 Important Notes

• Works only with block-level elements (like <p>, <div>, etc.).
• Best results when text-align is set to justify.
• Multi-line text is required — it won’t affect single-line content.
• Behavior may vary slightly across browsers — especially older ones.

---

🧪 Bonus: Styling Headlines or Buttons

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

This creates beautifully balanced titles when they wrap to two or more lines.

---

✅ Summary

Feature	Description
Controls	Last line of block-level text
Commonly used with	text-align: justify
Values	left, right, center, justify, start, end
Good for	Paragraphs, titles, multi-line buttons

---

🔚 Final Thought

The text-align-last property might be subtle, but it’s a powerful finishing touch in typographic design — letting you polish how the last line of text appears in a justified or stylized block.

---