CSS3文本效果

欢迎访问的我的个人博客http://liubofeng.com/

CSS3文本效果

CSS3 文本阴影

text-shadow 属性

text-shadow 属性应用于阴影文本
语法
text-shadow: h-shadow v-shadow blur color;

text-shadow: 5px 5px 5px red;
//阴影向下偏移5px,向右偏移5px，虚化5px,红色阴影

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

CSS3 换行

word-break 属性

word-break 属性规定自动换行的处理方法
语法
word-break: normal|break-all|keep-all;

word-break: normal; //使用浏览器默认的换行规则。
word-break: break-all;//允许在单词内换行。
word-break: keep-all;//只能在半角空格或连字符处换行。

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

word-wrap 属性

word-wrap 属性允许长单词或 URL 地址换行到下一行
语法
word-wrap: normal|break-word;

word-wrap: normal;//溢出
word-wrap: break-word; //打断换行

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

CSS3 新文本属性

text-align-last 属性

text-align-last 属性规定如何对齐文本的最后一行
语法
text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

text-align-last: auto;//默认值。最后一行被调整，并向左对齐。
text-align-last: left;//最后一行向左对齐。
text-align-last: right;//最后一行向右对齐。
text-align-last: center;//最后一行居中对齐。
text-align-last: justify; //最后一行被调整为两端对齐。
text-align-last: start;//最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。
text-align-last: end;//最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
text-align-last: initial;//设置该属性为它的默认值。请参阅 initial。
text-align-last: inherit;//从父元素继承该属性。请参阅 inherit。

兼容性
text-align-last 属性只有IE支持，在Firefox中需要加上其前缀“-moz”, Chrom50.0.2661.102以上
注意
text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用

text-emphasis 属性

向元素的文本应用重点标记以及重点标记的前景色
语法
text-emphasis: text-emphasis-style text-emphasis-color;
兼容性
任何主流浏览器都不支持text-emphasis属性

text-justify 属性

text-justify 属性规定当 text-align 被设置为 justify 时的齐行方法
语法
text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

text-justify: auto;//浏览器决定齐行算法。
text-justify: inter-word;//增加/减少单词间的间隔。
text-justify: inter-ideograph;//用表意文本来排齐内容。
text-justify: inter-cluster//只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
text-justify: distribute;//类似报纸版面，除了在东亚语系中最后一行是不齐行的。
text-justify: kashida;//通过拉伸字符来排齐内容。

兼容性
只有 Internet Explorer 支持 text-justify 属性

text-overflow属性

text-overflow属性规定当文本溢出包含元素时发生的事情。
语法：
text-overflow：clip/ellipsis/string

text-overflow: clip;//修剪文本。
text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。
text-overflow: string; //使用给定的字符串来代表被修剪的文本。

兼容性：IE6.0+、Chrome4.0+、Safari3.1+、Opera11.1+(9.0-o-)