CSS3 Text Effects

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

• text-shadow

• box-shadow

• text-overflow

• word-wrap

• ##word-break

---

CSS3 text shadow

In CSS3, the text-shadow property applies to text shadow.

You specify the horizontal shadow, vertical shadow, blur distance, and shadow color:

Example

Add a shadow to the title:

      
  
文本阴影效果!
  

Run the program and try it

---

##CSS3 box-shadow propertyThe CSS3 box-shadow property in CSS3 is applicable to box shadow

Example

      
  
盒子阴影
  

Run the program to try it

---

Shadow adds a blur effect

      
  
这是一个带有模糊效果的阴影
  

Run the program to try it

---

CSS3 Text Overflow property

CSS3 text overflow property specifies how overflow content should be displayed to the user

      
  
以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。
 
div 使用 "text-overflow:ellipsis":
 
This is some long text that will not fit in the box
 
div 使用 "text-overflow:clip":
 
This is some long text that will not fit in the box
 
div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):
 
This is some long text that will not fit in the box
  

Run the program to try it

---

CSS3 line wrapping

If a word is too long , doesn't fit inside a region, it expands outside:

In CSS3, the wrap property allows you to force text to wrap - even if that means splitting it a word in the middle:

      
  
 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
  

Run Try the program

---

CSS3 Word Breaking

CSS3 Word Breaking property specifies the newline rule:

CSS code is as follows ：

      
  
 This paragraph contains some text. This line will-break-at-hyphenates.
 
 This paragraph contains some text: The lines will break at any character.
 
注意: word-break 属性不兼容 Opera.
  

Run the program and try it