CSS3 Text
CSS3 Text
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-overflowword-wrapword-break
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -o- specify the first version that worked with a prefix.
| Property | ||||||
|---|---|---|---|---|---|---|
| text-overflow | 4.0 | 12.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 12.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 12.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Text Overflow
The CSS3 text-overflow property specifies how overflowed content that is not
displayed should be signaled 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 #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
Try it yourself »
The following example shows how you can display the overflowed content when hovering over the element:
CSS3 Word Wrapping
The CSS3 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.
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;
}
Try it yourself »
CSS3 Word Breaking
The CSS3 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.
The CSS code is as follows:
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
CSS3 Text Properties
The following table lists the new CSS3 text properties:
| Property | Description |
|---|---|
| text-align-last | Specifies how to align the last line of a text |
| text-emphasis | A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration |
| 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 |