Text Effects

You will use CSS text-decoration, text-shadow, text-wrap, overflow-wrap, and text-overflow to style text, control line breaks, and truncate overflowing labels without JavaScript.

What it is

CSS text effects are properties that change how characters are decorated and laid out. An outline-like effect can be created with text-shadow, while emphasis can use text-decoration. Wrap control decides where lines break: text-wrap: balance evens out short headings, and overflow-wrap: break-word prevents long words or URLs from pushing past a container. Overflow control decides what happens when text is too large for its box: overflow: hidden clips it, and text-overflow: ellipsis replaces clipped text with an ellipsis. Related terms include white-space, max-width, and the ch unit.

Why it matters

• It keeps text readable inside fixed-width cards, menus, and table cells.
• It prevents long URLs or product names from breaking page layout.
• It creates visual hierarchy with underlines, overlines, or subtle outlines.
• It truncates single-line labels cleanly instead of letting them overflow.
• It reduces the need for JavaScript-based text measurement.

Syntax or steps

Start with a width-limited container. Add wrapping rules to keep text inside. Add decoration or shadow for emphasis. Add the truncation pattern only when you want a single clipped line.

.balanced {
  text-wrap: balance;
  overflow-wrap: break-word;
}

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

Example

<style>
.demo {
  max-width: 36ch;
  font-family: system-ui, sans-serif;
}

.outline {
  color: #111;
  text-shadow:
    -1px -1px 0 #ffd166,
    1px -1px 0 #ffd166,
    -1px 1px 0 #ffd166,
    1px 1px 0 #ffd166;
}

.emphasis {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #0072b1;
}

.balanced {
  text-wrap: balance;
  overflow-wrap: break-word;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

<div class="demo">
  <h2 class="outline balanced">CSS Text Effects</h2>
  <p class="balanced">Long words like https://example.com/very/long/path can be broken safely.</p>
  <p class="emphasis">This sentence uses an underline effect.</p>
  <p class="truncate">This label is intentionally too long for its container and should be truncated.</p>
</div>

• .demo sets a narrow box so wrapping and overflow are visible.
• .outline uses four text-shadow offsets to draw a colored border around glyphs.
• .emphasis uses text-decoration for a thicker colored underline.
• .balanced uses text-wrap: balance for even heading lines and overflow-wrap: break-word for long words.
• .truncate uses the classic single-line ellipsis pattern.

Common mistakes

• Forgetting overflow: hidden or white-space: nowrap when using text-overflow: ellipsis.
• Using word-break: break-all everywhere; prefer overflow-wrap: break-word unless breaking any character is required.
• Making outline or glow effects too strong, which can reduce contrast and readability.
• Applying text-wrap: balance to long paragraphs; use it for headings or short blocks.

When to use it

Use truncation when you need one clean line. Use wrap control when you need text to stay inside a box without clipping. Use decoration or shadow when you need emphasis, not layout control.

Practice

1. Guided: Create a card with max-width: 30ch, a balanced heading, and a truncated label. Expected result: the heading lines are similar length, and the label ends with an ellipsis.
2. Challenge: Add an outline to the heading using text-shadow. Hint: use four shadows with offsets -1px and 1px.

Quick check

Why does text-overflow: ellipsis need overflow: hidden?

Because the ellipsis is only shown when the text is clipped by the overflow container.

Summary

CSS text effects combine decoration, wrapping, and overflow to make text readable and layout stable. Use ellipsis for single-line truncation, overflow-wrap for long words, and text-wrap for balanced headings.