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

The numbers in the table specify the first browser version that fully supports the property.

Property
IE
Chrome
Firebox
Safari
Opera
text-shadow
10.0
4.0
3.5
4.0
9.5
word-wrap
5.5
23.0
3.5
6.1
12.1
 

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 <h1> element:

h1 {
    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