編程教程CSS3 文本效果
CSS3引入了幾個新的文本屬性，我們可以使用文本樣式。
CSS3文本陰影
在CSS3中，我們可以使用text-shadow屬性將陰影應用于文本。
text-shadow接受以逗號分隔的陰影列表應用于文本。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 10px 10px 10px #CCC;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>上面的代碼呈現如下：
CSS3自動換行
在CSS3中，我們可以使用word-wrap屬性強制文本換行在一個單詞的中間。
它的可能值是
- normal - 在正常單詞斷點處中斷。
- break-word - 必要時中斷工作。
<!DOCTYPE html>
<html>
<head>
<style>
p.test {width: 11em;border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test">
This paragraph contains a very long
word: thisisaveryveryveryveryveryverylongwooooooooooooooooooord.
The long word will break and wrap to the next line.
The long word will break and wrap to the next line.</p>
</body>
</html>上面的代碼呈現如下：
CSS3文本溢出
CSS3中的text-overflow屬性確定如何向用戶發信號通知溢出的內容。
它可以被剪裁，或顯示省略號“...”或用戶定義的字符串。
它接受以下值。
- clip - 指示在內容區域的限制處截斷文本。
- ellipsis - 表示顯示省略號（'...'，U + 2026 HORIZONTAL ELLIPSIS）以表示剪切的文本。
- string - 顯示自定義字符串以表示剪切文本。
<!DOCTYPE html>
<html>
<head>
<style>
div {
white-space: nowrap;width: 100%;overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>
</html>上面的代碼呈現如下：
