pelicin › web › CSS

Text Overflow and Wrapping

This page lists the CSS properties related to text overflow and wrapping (line-breaking).

CSS Properties

text-overflow

Sets how to clip text when it overflows the container. (Requires white-space: nowrap and overflow: hidden.)

Specify clip or ellipsis.

| LIVE PREVIEW

clip-clip-clip-clip-clip-clip-clip-clip-clip-clip

ellipsis-ellipsis-ellipsis-ellipsis-ellipsis-ellipsis

white-space

Determines how white spaces in the source code are handled. (White spaces are spaces, tabs, and newlines.)

  • normal — (1) consecutive white spaces are collapsed into one; (2) newlines are treated the same as spaces and tabs; (3) lines are broken at <br> and as necessary.
  • nowrap — (1) consecutive white spaces are collapsed into one; (2) no line breaks occur (everything is in one line)
  • pre — (1) white spaces are preserved as-is; (2) lines are broken only at newlines and at <br>
  • pre-wrap — (1) white spaces are preserved; (2) lines are broken at newlines, at <br>, and as necessary. ("Like pre but allow wraps".)
  • pre-line — (1) white spaces are collapsed; (2) lines are broken at newlines, at <br>, and as necessary. ("Like pre but allow wraps, collapse all but newlines".)
  • break-spaces — Like pre-wrap, but any sequence of preserved white space always takes up space, including at the end of the line (normally they do not take up space at the end of the line, i.e. they "hang"). Example of break-spaces.

word-break

Sets where line break appears wherever the text would otherwise overflow its container.

  • normal — use the normal rule (never break out long words; Chinese/Japanese/Korean characters can be broken)
  • break-all — allows break anywhere
  • keep-all — never break out long words (even for Chinese/Japanese/Korean characters)

overflow-wrap

overflow-wrap was originally named word-wrap. It has since been renamed and aliased (MDN).

Determines how to break a single word if it overflows its container even when placed on its own line.

  • normal — normal behavior (i.e. lines are only broken at spaces between words)
  • anywhere — break the long word anywhere (without inserting hyphens); for min-content width calculation, "soft wrap" opportunities introduced by the word break are considered
  • break-word — break the long word anywhere (without inserting hyphens); for min-content width calculation, "soft wrap" opportunities introduced by the word break are NOT considered

hyphens

This property is partially supported by browsers.

Determines how to add hyphens when a long word is broken.

You can suggest word-break opportunities by using - (hard hyphen characters, always rendered whether or not the word is broken there) OR &shy; (soft hyphens, only rendered if the word is broken there). (<wbr> will never render hyphens.)

  • manual — word can only break where suggested (default)
  • none — don't break or hyphenate words, even where suggested (lines will only wrap at whitespace characters)
  • auto — browsers can break wherever it sees fit (uses dictionary), but manually suggested breakpoints will override automatic breakpoints

References