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 可向文本應(yīng)用陰影。
您能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：
實例
向標題添加陰影：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 自動換行
單詞太長的話就可能無法超出某個區(qū)域：
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 | 規(guī)定標點字符是否位于線框之外。 | 3 |
| punctuation-trim | 規(guī)定是否對標點字符進行修剪。 | 3 |
| text-align-last | 設(shè)置如何對齊最后一行或緊挨著強制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應(yīng)用重點標記以及重點標記的前景色。 | 3 |
| text-justify | 規(guī)定當 text-align 設(shè)置為 "justify" 時所使用的對齊方法。 | 3 |
| text-outline | 規(guī)定文本的輪廓。 | 3 |
| text-overflow | 規(guī)定當文本溢出包含元素時發(fā)生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規(guī)定文本的換行規(guī)則。 | 3 |
| word-break | 規(guī)定非中日韓文本的換行規(guī)則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割并換行到下一行。 | 3 |