CSS Text Effects (Overflow, Word Wrap, Line Break & Writing Modes)

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

In this chapter you will learn about the following properties:

• text-overflow
• word-wrap
• word-break
• writing-mode

CSS Text Overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled (visible in a way that the user knows that there is more to read) to the user.

It can be clipped:

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

or it can be rendered as an ellipsis (...):

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

The CSS code is as follows:

Example

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

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

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

Example

div.test:hover {
overflow: visible;
}

CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line. 

If a word is too long to fit within an area, it expands outside:

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

The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

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

The CSS code is as follows:

Example

Allow long words to be able to be broken and wrap onto the next line:

p {
word-wrap: break-word;
}

CSS Word Breaking

The CSS word-break property specifies line breaking rules.

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

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

Value	Description
normal	Default value. Uses default line break rules
break-all	To prevent overflow, word may be broken at any character
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"
break-word	To prevent overflow, word may be broken at arbitrary points
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

CJK is a short form standing for Chinese, Japanese, and Korean. The term is commonly used in the library world to refer to materials written in Chinese, Japanese, and Korean languages.

The CSS code is as follows:

Example

p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.

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

Value	Description
horizontal-tb	Let the content flow horizontally from left to right, vertically from top to bottom
vertical-rl	Let the content flow vertically from top to bottom, horizontally from right to left
vertical-lr	Let the content flow vertically from top to bottom, horizontally from left to right

The following example shows some different writing modes:

Example

p.test1 {
writing-mode: horizontal-tb;
}

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

p.test2 {
writing-mode: vertical-rl;
}

CSS Text Effect Properties

The following table lists the CSS text effect properties:

Property	Description
text-justify	Specifies how justified text should be aligned and spaced
text-overflow	Specifies how overflowed content that is not displayed should be signaled to the user
word-break	Specifies line breaking rules for non-CJK scripts
word-wrap	Allows long words to be able to be broken and wrap onto the next line
writing-mode	Specifies whether lines of text are laid out horizontally or vertically