# CSS3 文本效果 ## 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](/cssref/pr_hanging-punctuation.asp "CSS3 hanging-punctuation 屬性") | 規定標點字符是否位于線框之外。 | 3 | | [punctuation-trim](/cssref/pr_punctuation-trim.asp "CSS3 punctuation-trim 屬性") | 規定是否對標點字符進行修剪。 | 3 | | text-align-last | 設置如何對齊最后一行或緊挨著強制換行符之前的行。 | 3 | | [text-emphasis](/cssref/pr_text-emphasis.asp "CSS3 text-emphasis 屬性") | 向元素的文本應用重點標記以及重點標記的前景色。 | 3 | | [text-justify](/cssref/pr_text-justify.asp "CSS3 text-justify 屬性") | 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 | 3 | | [text-outline](/cssref/pr_text-outline.asp "CSS3 text-outline 屬性") | 規定文本的輪廓。 | 3 | | [text-overflow](/cssref/pr_text-overflow.asp "CSS3 text-overflow 屬性") | 規定當文本溢出包含元素時發生的事情。 | 3 | | [text-shadow](/cssref/pr_text-shadow.asp "CSS3 text-shadow 屬性") | 向文本添加陰影。 | 3 | | [text-wrap](/cssref/pr_text-wrap.asp "CSS3 text-wrap 屬性") | 規定文本的換行規則。 | 3 | | [word-break](/cssref/pr_word-break.asp "CSS3 word-break 屬性") | 規定非中日韓文本的換行規則。 | 3 | | [word-wrap](/cssref/pr_word-wrap.asp "CSS3 word-wrap 屬性") | 允許對長的不可分割的單詞進行分割并換行到下一行。 | 3 |