CSS3 Text Effects
CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
- text-shadow
- word-wrap
Browser Support
| Property | Browser Support | ||||
|---|---|---|---|---|---|
| text-shadow | |||||
| word-wrap | |||||
Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
Note: Internet Explorer 9 and earlier versions, does not support the text-shadow property.
CSS3 Text Shadow
In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:
Example
Add a shadow to a header:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 Word Wrapping
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.
In CSS3, 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 break and wrap onto the next line:
p {word-wrap:break-word;}
CSS3 Text Properties
| Property | Description | CSS |
|---|---|---|
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3 |
| punctuation-trim | Specifies whether a punctuation character should be trimmed | 3 |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3 |
| text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text | 3 |
| text-justify | Specifies the justification method used when text-align is "justify" | 3 |
| text-outline | Specifies a text outline | 3 |
| text-overflow | Specifies what should happen when text overflows the containing element | 3 |
| text-shadow | Adds shadow to text | 3 |
| text-wrap | Specifies line breaking rules for text | 3 |
| word-break | Specifies line breaking rules for non-CJK scripts | 3 |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3 |
