CSS3 文本效果

浏览数：40 / 时间：2015年06月09日

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

在本章中，你将学到如下文本属性：

text-shadow
word-wrap

浏览器支持：

属性	浏览器支持
text-shadow
word-wrap

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。

所有主流浏览器都支持word-wrap属性。

注释：IE9及更早的版本，不支持text-shadow属性。

CSS3文本阴影

在CSS3中，text-shadow可向文本应用阴影。

您能够规定水平阴影、垂直阴影、模糊距离、以及阴影的颜色：

   /*文本阴影效果*/
        div.textOne {
            width:250px;
            height:100px;
            text-align:center;
            font-size:30px;
            font-weight:bolder;
            font-family:KaiTi;
            text-shadow:5px 5px 5px #ff0000;
        }

CSS3 自动换行

单词太长的话就可能无法超出某个区域：

    <div class="textOne">
        This Paragraph<br />
        contains a very long<br />
        word:<br />
        thisisveryveryveryverylongword.<br />
        The long word will <br />
        break and wrap to<br />
        the next line.
    </div>

显示默认显示：

使用换行属性：

        div.textOne {
            width:120px;
            height:200px;
            border:1px solid black;
            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