🔠 CSS text-overflow — Controlling Overflowing Text with Style

The text-overflow property lets you control how text is displayed when it overflows its container — particularly in single-line or restricted-width elements. It works beautifully with ellipsis (…), clipping, and even custom behaviors.

---

🔹 What Does text-overflow Do?

It determines what happens when text doesn’t fit inside its container and must be cut off. It’s especially useful in UI components like buttons, cards, nav bars, or tables.

---

📘 Syntax

selector {
  text-overflow: clip | ellipsis | string;
}

✅ Important: It only works if overflow is hidden and white-space is nowrap.

---

💡 Values Explained

Value	Description
clip	Cuts off the overflow text without any indicator.
ellipsis	Adds … at the end of the text when it overflows.
<string>	You can provide a custom string (experimental; limited support).

---

✍️ Example: Truncating Text with Ellipsis

<div class="truncate">
  This is a very long title that won’t fit in a small box.
</div>

.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

✅ Result: You’ll see something like:

This is a very long title that won’t…

---

🖼️ Image Idea: Side-by-Side Comparison

Image Description:

Column 1	Column 2	Column 3
Normal text	Clipped text	Ellipsis text
Full line	Text is cut off	Text ends with …

🎯 Purpose: Show visually how clip and ellipsis behave differently.

---

🧠 Tips for Usage

• Common with one-liner UIs, like:
  • Cards
  • Navigation menus
  • Table cells
  • File names or article titles
• Combine with:

white-space: nowrap;
overflow: hidden;

To prevent wrapping and hide the overflow.

---

🧪 Bonus: Multiline Ellipsis (Advanced)

CSS text-overflow doesn’t work on multiline by default, but you can mimic the effect using line-clamp:

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

✅ This will truncate text after 2 lines and add ellipsis (in supported browsers).

---

✅ Best Use Cases

Scenario	Apply text-overflow?
Truncating file names	✅ Yes, with ellipsis
Shortening news headlines	✅ Yes
Keeping table columns neat	✅ Yes
Full text readability	❌ No — use wrap or tooltip

---

✅ Summary

Property	text-overflow
Controls	How overflowed inline text is handled
Values	clip, ellipsis, (limited) custom string
Requires	overflow: hidden and white-space: nowrap
Works on	Block or inline-block elements
Great for	Cards, buttons, labels, table cells

---

🔚 Final Thought

text-overflow is one of those elegant CSS tools that improve readability and UX without JavaScript. When space is tight, this is your best friend for creating clean, professional interfaces.

---