CSS3 Text

CSS Text Effects

Advanced Text Styling in CSS

Modern CSS offers several powerful features for controlling text layout and appearance, especially when dealing with constrained spaces or long words.

In this chapter, you will learn about these essential text properties:

• text-overflow: Handling text that exceeds its container.
• overflow-wrap (formerly word-wrap): Controlling how long words break.
• word-break: Specifying line breaking rules for different languages and scenarios.

Browser Support

These properties enjoy wide support across all modern web browsers. The table below shows the approximate first browser versions providing full support.

Property	Chrome	Edge	Firefox	Safari	Opera
text-overflow	Chrome 1+	Edge 12+	Firefox 7+	Safari 3.1+	Opera 11+
overflow-wrap (word-wrap)	Chrome 1+	Edge 12+	Firefox 3.5+	Safari 2+	Opera 10.5+
word-break	Chrome 1+	Edge 12+	Firefox 15+	Safari 3.1+	Opera 15+

Note: Vendor prefixes (like -o- or -webkit-) are generally no longer required for these properties in modern browsers.

CSS text-overflow

The text-overflow property specifies how to signal to the user that there is more content than can be displayed within the element’s box. This property only works when overflow is set to hidden, scroll, or auto, and white-space is set to nowrap.

Common values include:

• clip (default): Simply cuts off the text at the edge of the container.
• ellipsis: Renders an ellipsis (’…’) to indicate clipped text.

Example of clip:

This is some long text that will not fit in the box and will be clipped.

Example of ellipsis:

This is some long text that will not fit in the box and show ellipsis.

CSS Code Example:

.clipped-text {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: clip;
  padding: 5px;
  margin-bottom: 10px;
}

.ellipsis-text {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
}

Practical Use: Commonly used in UI elements like truncated links, table cells, or card titles to maintain layout consistency.

You might reveal the full text on hover by changing the overflow or white-space properties, though this can sometimes cause layout shifts. Using a tooltip (often implemented with JavaScript) is a more common approach.

CSS overflow-wrap (formerly word-wrap)

The overflow-wrap property specifies whether the browser should break lines within long words if they would otherwise overflow the container. The older word-wrap property is now an alias for overflow-wrap.

Default behavior (normal): Lines only break at allowed break points (like spaces or hyphens). A very long word might extend outside its container.

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. Without overflow-wrap, it might extend past the box.

Using break-word: Allows unbreakable words (like long URLs or strings without spaces) to be broken at arbitrary points if necessary to prevent overflow.

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. With break-word, the long word will wrap.

CSS Code Example:

.breakable-text {
  width: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  /* Allows breaking long words to prevent overflow */
  overflow-wrap: break-word;
  /* word-wrap: break-word; also works (alias) */
}

Practical Use: Essential for displaying user-generated content, code snippets, or URLs where long, unbreakable strings might occur.

CSS word-break

The word-break property specifies more granular line breaking rules, particularly useful for handling CJK (Chinese, Japanese, Korean) text or controlling breaks more aggressively.

• normal (default): Uses default line break rules.
• break-all: Allows breaks between any two characters (except for CJK text, where it behaves like word-break: break-word). This can be useful but might lead to awkward breaks in non-CJK languages.
• keep-all: Prevents breaks within words. Primarily used for CJK text where breaking between characters is generally undesirable.
• break-word: Behaves like overflow-wrap: break-word but has slightly different legacy browser implications. Generally, overflow-wrap is preferred for the specific case of breaking long words to prevent overflow.

Example with keep-all (prevents breaks within words, might still overflow if overflow-wrap isn’t also used):

This line will-try-not-to-break-within-words. LongWordHere.

Example with break-all (breaks aggressively):

This line will break between any character if needed.

CSS Code Example:

.keep-words-together {
  /* Primarily for CJK, prevents breaks inside words */
  word-break: keep-all;
  width: 150px;
  border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 10px;
}

.break-anywhere {
  /* Breaks between any two characters if needed */
  word-break: break-all;
  width: 150px;
  border: 1px solid #ccc;
  padding: 5px;
}

Note: The interaction between overflow-wrap and word-break can be complex. Use overflow-wrap: break-word primarily to prevent overflow from long words. Use word-break for more specific control over breaking behavior, especially with CJK text or when needing aggressive breaks (break-all).

For further details, consult the MDN Web Docs:

• text-overflow
• overflow-wrap
• word-break

Summary of CSS Text Properties Covered

Here’s a quick reference for the properties discussed:

Property	Description
text-overflow	Specifies how to signal overflowed content that is not displayed (e.g., using ’…’). Requires overflow: hidden and white-space: nowrap.
overflow-wrap	(Formerly word-wrap) Allows long, unbreakable words to be broken if they would otherwise overflow their container.
word-break	Specifies more general line breaking rules, including how breaks occur between characters.

Other related properties like text-align-last, text-emphasis, and text-justify exist but are less commonly used or have varying browser support. Focus on mastering the core properties above for robust text control.