編程教程CSS3 文本效果
CSS3引入了幾個新的文本屬性，我們可以使用文本樣式。
CSS3文本陰影
在CSS3中，我們可以使用text-shadow屬性將陰影應(yīng)用于文本。
text-shadow接受以逗號分隔的陰影列表應(yīng)用于文本。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 10px 10px 10px #CCC;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>上面的代碼呈現(xiàn)如下：
CSS3自動換行
在CSS3中，我們可以使用word-wrap屬性強(qiáng)制文本換行在一個單詞的中間。
它的可能值是
- normal - 在正常單詞斷點(diǎn)處中斷。
- break-word - 必要時(shí)中斷工作。
<!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>上面的代碼呈現(xiàn)如下：
CSS3文本溢出
CSS3中的text-overflow屬性確定如何向用戶發(fā)信號通知溢出的內(nèi)容。
它可以被剪裁，或顯示省略號“...”或用戶定義的字符串。
它接受以下值。
- clip - 指示在內(nèi)容區(qū)域的限制處截?cái)辔谋尽?/li>
- 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>上面的代碼呈現(xiàn)如下：
