CSS Text Effects

CSS Text Overflow, Word Wrap, and Line Breaking Rules

In this chapter you will learn about the following properties:

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

CSS Text Overflow

The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS), or display a custom string.

Note that text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap;

The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set some other CSS properties.

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box.

Text-overflow comes into play only when:

  1. the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
  2. the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)

Example -

The following example shows how you can display the overflowed content when hovering over the element:

CSS Word Wrapping

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line.The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

Values

normal

Lines may only break at normal word break points (such as a space between two words).

break-word

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

CSS Word Wrapping

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line.The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

CSS Word Breaking

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.