CSS3 Tutorial

CSS3 References

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

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;
}

Try it yourself »

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;}

Try it yourself »

New Text Properties