CSS3 text effects
Several new text features are included in the CSS3.
In this chapter, you will learn about the following text properties:
Browser support
Internet Explorer, firefox,chrome, Safari, and opera support the Text-shadow Property.
All mainstream browsers support the Wrap (word-wrap) Property.
note: The Text-shadow property is not supported for Internet Explorer 9 and earlier versions of Ie.
Text Shadow of CSS3
CSS3, the Text-shadow property applies to Text Shading.
You specify the horizontal shadow, the vertical shadow, the blurred distance, and the color of the Shadow:
H1 {Text-shadow: 5px 5px 5px #FF0000;}
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"> <title>W3cschool Tutorial (w3cschool.cn)</title> <style>H1{Text-shadow:5px 5px 5px #FF0000;}</style></Head><Body><H1>Text-shadow effect!</H1><P><b>Note:</b>Internet Explorer 9 and earlier versions, does not a support for the Text-shadow Property.</P></Body></HTML>
CSS3 line break
If a word is too long and does not fit within an area, it expands to the outside:
This paragraph contains a very long Word:thisisaveryveryveryveryveryverylongword. The long word would break and wrap to the next Line.
CSS3, The Wrap property allows you to force text Wrapping-even if it means splitting one word in the middle of it:
This paragraph contains a very long Word:thisisaveryveryveryveryveryverylongword. The long word would break and wrap to the next Line.
The CSS code is as Follows:
Allow long text wrapping:
{word-wrap:break-word;}
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"> <title>W3cschool Tutorial (w3cschool.cn)</title><style>p.test{width:11em;Border:1px solid #000000;Word-wrap:Break-word;}</style></Head><Body><Pclass= "test">This paragraph contains a very long Word:thisisaveryveryveryveryveryverylongword. The long word would break and wrap to the next Line.</P></Body></HTML>
New Text Properties
Properties |
Description |
CSS |
Hanging-punctuation |
Specifies whether the punctuation character is outside the Wireframe. |
3 |
Punctuation-trim |
Specifies whether punctuation characters are trimmed. |
3 |
Text-align-last |
Sets how to align the last line or the row immediately preceding the Force line Break. |
3 |
Text-emphasis |
Applies a focus marker to the text of the element and the foreground color of the highlighted Marker. |
3 |
Text-justify |
Specifies the alignment method that is used when text-align is set to "justify". |
3 |
Text-outline |
Specifies the outline of the Text. |
3 |
Text-overflow |
Specifies what happens when the text overflows the containing Element. |
3 |
Text-shadow |
Adds a shadow to the Text. |
3 |
Text-wrap |
Specifies the line-wrapping rules for Text. |
3 |
Word-break |
Rules for Non-chinese-japanese-korean Text. |
3 |
Word-wrap |
Allows splitting of long, indivisible words and wrapping to the next Line. |
3 |
[HTML] CSS3 text effects