CSS3 文本装饰

浏览器对CSS3文本特性的支持情况，如下表所示：

浏览器	text-shadow	text-overflow	word-wrap	hyphens
Opera	9.5+	9+.带前缀-o-	10.5+	不支持
Firefox	3.5+	7+	3.6+	6+，带前缀-moz-
Safari	3.1+	3.2+	3.1+	5.1+，带前缀-webkit-
Chrome	4+	4+	3.1+	不支持
IE	10+	6+	5.5+	10+，带前缀-ms-
ios	3.2+	3.2+	3.2+	4.2+，带前缀-webkit-
Android	2.1+	2.1+	2.1+	不支持
Chrome Mobile	Beta+	Beta+	Beta+	不支持
Opera Mobile	10+	10+，带前缀-o-	10+	不支持
Opera Mini	不支持	5+，带前缀-o-	5+	不支持

1、text-shadow，文本阴影可以制造出各种各样的效果，通常可用于高亮文本、增加文本深度、文本突出显示。具体语法很简单，

text-shadow:1px 1px 1px white;

其中，前两个单位表示阴影距原始文本外水平和垂直的偏移。正值表示阴影分别向右向下偏移；负值表示阴影向左向上偏移。值的单位可以算CSS中任何的单位标识符。第三个单位表示阴影的模糊程度，值越大阴影越模糊，默认值是1px，相当于高亮的轮廓。下面是一个实例的相关代码。

.textShadow1{

    text-shadow:1px 1px 1px white;

}



.textShadow2{

    text-shadow:-1px -1px 1px gray;

}



.textShadow3{

    text-shadow:5px 5px 10px white;

}

以上三个样式的效果图如下所示：

另外，在相同的选择器中可以使用多重文本阴影，我们可以充分利用阴影制造各种效果，多重阴影写法如：

.textShadows{

    text-shadow:0 0 2px #000,

                0 0 2px #aaa,

                0 0 4px #999,

                0 0 6px #888,

                0 0 8px #666,

                0 6px 6px rgba(0,0,0,0.5),

                0 8px 20px reba(0,0,0,0.5);

}

2、text-overflow属性是当文本溢出时它的容器盒时文本的显示（还必须定义容器盒的overflow属性为hidden），它可以将溢出的文本用更美观的省略号代替直接切掉。

.textOverflow{

    width:400px;

    font-size: 2.1em;

    overflow: hidden;

    text-overflow: ellipsis;

}

效果图如下：

另外，利用该属性可以限制文本长度，将多余的文字用省略号代替，代码如下：

.textOverflow1{

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    width: 350px;

    height:30px;

    color:white;

}

效果图：

3、单词溢出小容器的另一个解决方案就是使用word-wrap属性，将一个长单词显示在两行。代码如下：

.wordWrap{

    width:200px;

    word-wrap:break-word;

}

效果图：

4、控制断字hyphens属性，支持该属性的浏览器比较少，但其还是有其一定的用处的，因为在web页面中你无法让文本整整齐齐的显示出来，如上图所示，由于单词的长度不一造成很多空隙，使得看来很不美观。

CSS3提出了hyphens属性。其包括三个可能值：

• none：禁止所有的断字。它可以用来禁止继承父元素的断字
• manual：单词断行到单独的行上面，中间包含断行字符（例如“-”）
• auto：在适当的断字处，单词自动断字。但浏览器必须识别出需要断字文本的语言，所以断字只适用于有正确的语言标记，可以父元素上设置lang属性来声明语言