X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

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 specifies the first browser version that fully supports the property.

Property
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.

Text shadow effect!

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 »


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



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook