CSS Text Effects
CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes
The following attributes will be covered in this chapter:
- text-overflow
- word-wrap
- word-break
- writing-mode
CSS Text Overflow
The way overflowed content that is not shown is indicated to the user is specified by the CSS text-overflow property.
It is able to be cut:
or it can be rendered as an ellipsis (…):
The following is the CSS code:
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;
}
When you hover over an element, you may see the overflowing content as in the image below:
Example
div.test:hover {
overflow: visible;
}
CSS Word Wrapping
Long words can be broken up and wrapped onto the following line using the CSS word-wrap property.Â
A word expands outside of a region if it is too long to fit inside it:
You can force the text to wrap, even if it means separating it in the middle of a word, by using the word-wrap property:
Example
Allow long words to be able to be broken and wrap onto the next line:
p {
word-wrap: break-word;
}
CSS Word Breaking
Line breaking guidelines are specified via the CSS word-break attribute.
Example
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
CSS Writing Mode
The orientation of text lines is specified by the CSS writing-mode property, which can be either vertical or horizontal.
Several writing styles are demonstrated in the sample that follows:
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 |
