css3 新增的文本属性

1、word-wrap  允许对长的不可分割的单词进行分割并换行到下一行

2、word-break   规定非中日韩文本的换行规则

3、text-wrap   规定文本的换行规则

4、text-shadow   向文本添加阴影

5、text-overflow   规定当文本溢出包含元素时发生的事情

6、text-outline   规定文本的轮廓

7、text-justify    规定当 text-align 设置为 "justify" 时所使用的对齐方法

8、text-emphasis    向元素的文本应用重点标记以及重点标记的前景色

9、text-align-last    设置如何对齐最后一行或紧挨着强制换行符之前的行

10、punctuation-trim   规定是否对标点字符进行修剪

11、hanging-punctuation   规定标点字符是否位于线框之外

word-wrap:

浏览器支持:所有主流浏览器都支持该属性

语法: 

word-wrap:normal | break-word

对比一下normal(图左)的效果和break-word(图右)的效果:

css3 新增的文本属性_第1张图片css3 新增的文本属性_第2张图片


word-break:

浏览器支持:所有主流浏览器都支持该属性

语法:

word-break: normal|break-all|keep-all;    // break-all:允许在单词内换行 ;  keep-all:只能在半角空格或者连字符处换行


text-wrap:

浏览器支持:所有主流浏览器都不支持该属性

语法:

text-wrap: normal|none|unrestricted|suppress;    // normal:只在允许的换行点进行换行;   none:不换行;  

  // unrestricted:在任意两个字符间换行;   suppress:压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行


text-shadow:

浏览器支持:所有主流浏览器都支持该属性

语法:

text-shadow: h-shadow v-shadow blur color;  

 css3 新增的文本属性_第3张图片

注释text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0


text-overflow:

浏览器支持:所有主流浏览器都支持该属性

语法:

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


text-outline:

浏览器支持:所有主流浏览器都不支持该属性

语法:

text-outline: thickness blur color;

css3 新增的文本属性_第4张图片


text-justify:

浏览器支持:只有Internet Explorer 支持 text-justify 属性

语法:

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

css3 新增的文本属性_第5张图片


text-emphasis:

浏览器支持:所有主流浏览器都不支持该属性

语法:

text-emphasis: text-emphasis-style text-emphasis-color;  //text-emphasis-style:向元素的文本应用重点标记; text-emphasis-color:定义重点标记的前景色


text-align-last:

浏览器支持:


语法:

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

auto:无特殊对齐方式left:内容左对齐center:内容居中对齐right:内容右对齐justify:内容两端对齐start:内容对齐开始边界end:

内容对齐结束边界

initial: 设置该属性为它的默认值

inherit:从父元素继承该属性



punctuation-trim:


浏览器支持:所有主流浏览器都不支持该属性


语法:

punctuation-trim: none|start|end|allow-end|adjacent;


css3 新增的文本属性_第6张图片


hanging-punctuation:

浏览器支持:所有的主流浏览器都不支持该属性

语法:

hanging-punctuation: none|first|last|allow-end|force-end;

// none:不在文本整行的开头还是结尾的行框之外放置标签符号; first:标点附着在首行开始边缘之外; last:标点附着在首行结尾边缘之外


你可能感兴趣的:(css3)