CSS3 文本效果

CSS3 包含多個新的文本特性。

在本章中，您將學到如下文本屬性：

text-shadow
word-wrap
瀏覽器支持
屬性    瀏覽器支持
text-shadow                    
word-wrap                    
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。

所有主流瀏覽器都支持 word-wrap 屬性。

注釋：Internet Explorer 9 以及更早的版本，不支持 text-shadow 屬性。

CSS3 文本陰影
在 CSS3 中，text-shadow 可向文本應用陰影。

文本陰影效果
您能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：

實例

向標題添加陰影：

h1 { text-shadow: 5px 5px 5px #FF0000; } 
親自試一試

CSS3 自動換行
單詞太長的話就可能無法超出某個區域：

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

在 CSS3 中，word-wrap 屬性允許您允許文本強制文本進行換行 - 即使這意味著會對單詞進行拆分：

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

下面是 CSS 代碼：

實例
允許對長單詞進行拆分，并換行到下一行：

p {word-wrap:break-word;}

親自試一試

新的文本屬性
屬性    描述    CSS
hanging-punctuation    規定標點字符是否位于線框之外。    3
punctuation-trim    規定是否對標點字符進行修剪。    3
text-align-last    設置如何對齊最后一行或緊挨著強制換行符之前的行。    3
text-emphasis    向元素的文本應用重點標記以及重點標記的前景色。    3
text-justify    規定當 text-align 設置為 "justify" 時所使用的對齊方法。    3
text-outline    規定文本的輪廓。    3
text-overflow    規定當文本溢出包含元素時發生的事情。    3
text-shadow    向文本添加陰影。    3
text-wrap    規定文本的換行規則。    3
word-break    規定非中日韓文本的換行規則。    3
word-wrap    允許對長的不可分割的單詞進行分割并換行到下一行。    3