CSS3 文本效果

CSS3中包含几个新的文本特征。

在本章中您将了解以下文本属性：

• text-shadow

• box-shadow

• text-overflow

• word-wrap

• word-break

---

CSS3的文本阴影

CSS3中，text-shadow属性适用于文本阴影。

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

实例

给标题添加阴影:

      
  
文本阴影效果!
  

运行程序尝试一下

---

CSS3 box-shadow属性

CSS3中CSS3 box-shadow属性适用于盒子阴影

实例

      
  
盒子阴影
  

运行程序尝试一下

---

阴影添加一个模糊效果

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

运行程序尝试一下

---

CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

      
  
以下 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
  

运行程序尝试一下

---

CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

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

运行程序尝试一下

---

CSS3 Word Breaking

CSS3 Word Breaking属性指定换行规则：

CSS代码如下：

      
  
 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.
  

运行程序尝试一下