✨ CSS Text Effects

? Quick Overview

CSS Text Effects allow you to control how text behaves when it overflows, wraps, breaks, or even changes its writing direction. These properties are essential for building clean, responsive UIs that handle long labels, dynamic content, and multi-language layouts.

? Key Concepts

text-overflow – Displays an ellipsis (…) or custom clipping when text overflows its container.
word-wrap (alias of overflow-wrap) – Allows long words to break and wrap onto the next line.
word-break – Controls where the browser is allowed to break words.
writing-mode – Specifies horizontal or vertical text layout direction.

? Syntax

? View Code Example

/* Basic syntax of common text-effect properties */
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
writing-mode: vertical-rl;

? Full Example: Text Effects in a Card

This example shows how you might use all four properties in a small UI card.

? View Code Example

/* Container that simulates a narrow UI card */
.card {
  width: 260px;
  border: 1px solid #e5e7eb;
  padding: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Truncate overflowing text with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow long words like URLs to wrap */
.card-body {
  word-wrap: break-word;
}

/* Force breaks even inside long words if needed */
.card-warning {
  word-break: break-all;
}

/* Vertical label on the side */
.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

? Live Output / Visual Demo

? How These Properties Look

The boxes below roughly mimic what you would see in a real layout.

This is an example of very long text that will overflow and show an ellipsis.

ThisIsAReallyLongWordThatShouldBreakAndWrapToNextLineIfNeeded

BreakThisLongUnbrokenTextAtAnyPointToPreventOverflow

Vertical Text Layout Example

? How Each Property Works

text-overflow: ellipsis; – Only works when the text is clipped with overflow: hidden; and usually with white-space: nowrap; and a fixed width.
word-wrap: break-word; – Lets very long words wrap to the next line without breaking your layout.
word-break: break-all; – Breaks words at any point, useful for URLs or hashes in tiny containers.
writing-mode: vertical-rl; – Flips the flow of text so lines stack vertically (top to bottom, right to left).

✅ Tips

Use text-overflow: ellipsis in UI labels or table cells for cleaner overflow control.
word-wrap: break-word is great for responsive designs with dynamic content.
word-break: break-all can help avoid layout breakage with unbreakable strings like URLs.
Try writing-mode: vertical-rl for languages like Chinese, Japanese, or for decorative vertical headings.

? Practice Tasks

Create a label with overflowing text and use text-overflow: ellipsis to handle it.
Wrap long URLs or codes inside a narrow container using word-wrap: break-word.
Use writing-mode: vertical-rl for side labels in a sidebar layout.
Experiment with word-break values like normal, break-all, and keep-all to improve readability in small-width elements.