Home > Developer > Web Develop
Several new text features are included in the CSS3.
In this chapter, you will learn about the following text properties:
Text-shadow
Word-wrap
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 CSS3CSS3, 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
