CSS Text Effects

CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes

CSS provides several properties and techniques for managing text overflow, word wrapping, line breaking, and writing modes, allowing developers to control how text behaves within its container and how it's presented to users. Let's discuss each of these concepts:

Text Overflow:

text-overflow property: This property specifies how overflowed content that is not displayed should be signaled to the user. Common values include ellipsis, which displays an ellipsis (...) to indicate truncated text, and clip, which simply clips the text without any indication of overflow.
overflow property: While not directly related to text overflow, the overflow property can also be used to control the behavior of overflowed content within an element's box.

Example

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

You can click on above box to edit the code and run again.

Output

This is some long text that will not fit in the box

Word Wrap:

word-wrap property: This property controls whether long words can be broken and wrapped onto the next line if they overflow their container. Values include normal, which prevents wrapping, and break-word, which allows wrapping within words.

Example

#test {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

You can click on above box to edit the code and run again.

Output

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Line Breaking Rules:

white-space property: This property controls how white space inside an element is handled, including line breaks and wrapping behavior. Values include normal, nowrap, pre, pre-wrap, and pre-line.
word-break property: This property specifies how words should be broken when they exceed the boundaries of their container. Values include normal, break-all, and keep-all.

Example

test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}

You can click on above box to edit the code and run again.

Output

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

Writing Modes:

direction property: This property specifies the direction of the text flow within an element. Values include ltr (left-to-right) and rtl (right-to-left).
unicode-bidi property: This property specifies the level of embedding and overriding of bidirectional text in an element. Values include normal, embed, and override.
text-align property: While primarily used for text alignment, this property also interacts with writing modes, particularly for right-to-left languages. Values include left, right, center, and justify

Example

#test1 {
  writing-mode: horizontal-tb; 
}

span.#test2 {
  writing-mode: vertical-rl; 
}

#test2 {
  writing-mode: vertical-rl; 
}

You can click on above box to edit the code and run again.

Output

Some text with default writing-mode.

Some text with a span element with a vertical-rl writing-mode.

Some text with writing-mode: vertical-rl.