CSS3文本效果

CSS3文本阴影

text-shadow属性

• 概念
  设置文本的阴影。
• 语法
  text-shadow：h-shadow v-shadow blur color；
• 属性值

属性值	取值	描述
h-shadow	length	阴影在水平方向上的偏移量
v-shadow	length	阴影在竖直方向上的偏移量
blur	length	阴影模糊的效果
color	#xxxxxx、RGB、颜色值	阴影的颜色

• 兼容性
  IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+

CSS3换行

word-break属性

• 概念
  规定文本自动换行的处理方法
• 语法
  word-break：normal | break-all | keep-all；
• 属性值

属性值	描述
normal	正常自动换行，不会讲单词断开显示在两行中
break-all	可以将一个单词断开显示在两行中
keep-all	只能在有空格或者连字符‘-’的时候换行，主要适用于拉丁文本

• 兼容性
  IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

word-wrap属性

• 概念
  允许长单词或URL地址换行到下一行。
• 语法
  word-wrap：normal | break-word
• 属性值

属性值	描述
normal	正常显示文本换行
break-word	可以将一个长单词断开显示在两行中

• 兼容性
  IE5.5+、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+

CSS3新文本属性

text-align-last属性

• 概念
  规定文本的最后一行的对齐方式。
• 语法
  text-align-last：auto | left | right | center | justify | start | end | initial | inherit;
• 属性值

属性值	描述
auto	默认值，向左对齐
left	向左对齐
right	向右对齐
center	居中对齐
justify	两端对齐
start	与之前文本的对齐方式相同
end	与之前文本的对齐方式相反
initial	设置该属性为它的默认值
inherit	继承父元素的对齐方式

• 注意
  text-align-last属性只有在 text-align 属性设置为 justify 的时候才有效。
• 兼容性
  IE5.5+、Chrome50+、FireFox12+ 需要-moz-前缀、Opera不支持

text-overflow属性

• 概念
  规定文本溢出包含元素发生的事情
• 语法
  text-overflow：clip | ellipsis | string
• 属性值

属性值	描述
clip	裁减掉溢出的部分
ellipsis	不显示溢出部分，用省略号表示文本不完全
string	不显示溢出部分，用自己设定的符号表示溢出的部分（只有Firefox浏览器支持）

• 注意
  使用这个属性之前，一定要设置 overflow 属性为 hidden。
• 兼容性
  IE6+、FireFox7+、Chrome4+、Safari3.1+、Opera11.1+ （9.0 -o-）