Loading lesson path
Concept visual
Start from A
Overview
CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes. In this chapter you will learn about the following properties:
Formula
text - overflowFormula
Allows long words to be able to be broken and wrap onto the next line word - breakSpecifies whether lines of text are laid out horizontally or vertically
text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or rendered with ellipsis (...).
Formula
Both of the following properties are required for text - overflow to take effect:white-space: nowrap;
overflow: hidden;Here, the overflowed content is clipped: This is some long text that will not fit in the box Here, the overflowed content is rendered with ellipsis (...): This is some long text that will not fit in the box The CSS code is as follows:
Example p.test1 {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}The following example shows how you can display the overflowed content when hovering over the element:
Example p:hover {
overflow: visible;
}Formula
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 break and wrap to the next line.
Formula
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:
Allow long words to be able to be broken and wrap onto the next line:
p {
word-wrap: break-word;
}Formula
word - break property specifies how words should break when reaching the end of a line.This property can take one of the following values: normal
Formula
- This is default. Uses the default line breaking rules of the language break - all
- Allows words to be broken at any character to prevent overflow keep - allFormula
This paragraph contains some text. This line will - break - at - hyphens.
Here, we use break - allThis paragraph contains some text. The lines will break at any character. The CSS code is as follows:
Example p.test1 {Formula
word - break:normal;
}
p.test2 {Formula
word - break:break-all;
}Formula
writing - mode property specifies whether lines of text are laid out horizontally or vertically.This property can take one of the following values:
Formula
horizontal - tb
- Default. The text flows horizontally from left to right, vertically from top to bottom vertical - rl
- The text flows vertically from top to bottom, horizontally from right to left vertical - lrFormula
Here is a text with a span element with a vertical - rl writing - mode.The following example shows some different writing modes:
Example p.test1 {
writing-mode: horizontal-tb;
}
span {
writing-mode: vertical-rl;
}
p.test2 {Formula
writing - mode:vertical-rl;
}The following table lists the CSS text effect properties:
Formula
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 - modeSpecifies whether lines of text are laid out horizontally or vertically