CSS

✂️ CSS Tutorial: text-overflow

📌 Introduction

The text-overflow property in CSS controls how overflowing text is displayed when it doesn’t fit inside its container. It’s commonly used in UI design, especially for cards, tables, labels, and mobile layouts where space is limited. This property helps you keep your design clean and readable. ✨

🎯 Why Use text-overflow?

To show ellipsis (…) when text is too long 🔤
To hide overflowing text safely 🙈
To keep UI layouts from breaking 📱
To handle long titles, descriptions, or filenames 🧾

✨ Syntax

Basic Syntax

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

Note

Important:text-overflow only works when:
• overflow: hidden (or scroll) is applied, AND • white-space: nowrap is used.

🧩 Available Values

1. clip ✂️ (default)

Cuts off the text at the edge of the container without any visible indicator.

clip Example

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

2. ellipsis (…) ⭐

Replaces clipped text with an ellipsis. This is the most popular option for UI layouts.

ellipsis Example

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. custom string 📝

You can replace the ellipsis with any string you like.

Custom Overflow Text

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ">>>"; /* custom string */
}

🔥 Practical Examples

1. Truncate a Long Title

Long Title Truncation

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

2. Overflow Inside Flex or Grid Layouts

Inside Flexbox

.item {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. Custom Decorative Overflow

Decorative Example

.fancy {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ">>>"; /* stylish custom string */
}

📊 Comparison Table

Value	Effect
clip	Cuts off text abruptly
ellipsis	Adds "…" for trimmed content
"string"	Replaces overflow with custom characters

🖼️ Visual Example

Further details can be found at: https://dummyimage.com/900x240/eeeeee/000000&text=text-overflow+clip+|+ellipsis

>>“Good UI is about showing the right amount of information — not more, not less.” ✨

🎉 Conclusion

The text-overflow property is essential for clean, responsive, and user-friendly layouts. Whether you're designing dashboards, mobile apps, product cards, or tables, it helps maintain structure while improving readability. Pair it with white-space and overflow for perfect results. 🚀