CSS Text Effects

Text Overflow

When text is too long for its container, you can control how it is displayed. The most common pattern is showing an ellipsis (...).

To make ellipsis work, you typically need:

• a fixed width (or max-width)
• white-space: nowrap
• overflow: hidden
• text-overflow: ellipsis

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

If you want clipped text without ellipsis:

.clip {
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

Word Wrapping

Long words or URLs can break layouts. Use these properties to control wrapping behavior.

Wrap long words if needed:

.wrap {
  overflow-wrap: break-word;
}

More aggressive breaking (use carefully):

.break {
  word-break: break-all;
}

Recommended UI default: Prefer overflow-wrap: break-word for readable breaking, especially for URLs and long tokens.

Writing Mode

CSS can display text vertically using writing-mode. This is useful for labels, side captions, and certain design layouts.

.vertical {
  writing-mode: vertical-rl;
}

You can also rotate text using transforms (different technique):

.rotated {
  display: inline-block;
  transform: rotate(-90deg);
}

Text Shadow

The text-shadow property adds a shadow to text. Syntax:

text-shadow: offset-x offset-y blur color;

Soft shadow:

.title {
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

Multiple shadows:

.glow {
  text-shadow:
    0 0 6px rgba(59,130,246,.7),
    0 0 18px rgba(59,130,246,.45);
}

Tip: Keep text shadows subtle for readability. Strong shadows can make small text harder to read.

Summary

• Use text-overflow: ellipsis with nowrap + hidden overflow for single-line truncation.
• Use overflow-wrap: break-word to prevent layout breaks from long words/URLs.
• writing-mode enables vertical text layouts.
• text-shadow adds depth and glow effects to text.