CSS3 新增文本属性

CSS 属性名	含义	值
text-align-last	最后一行文本水平对齐方式	start：靠文字起始方向对齐，默认值。 end：靠文字结束方向对齐。 left：靠左对齐。 right：靠右对齐。 center：居中对齐。 justify：两端对齐。
text-decoration-line	文本修饰线的类型	none：无。 underline：下划线。 overline：上划线。 line-throuth：删除线。
text-decoration-style	文本修饰线风格	solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。 wavy：波浪线。
text-decoration-color	文本修饰线颜色	颜色
text-decoration	文本修饰线复合属性	多个值使用空格分隔
word-wrap / overflow-wrap	是否允许单词内部断行	normal：不允许。 break-wrod：允许。
white-space	文本显示格式	normal：默认值。 pre：原格式显示。 pre-wrap：pre基础上+自动换行。 pre-line：normal基础上+识别换行符。 nowrap：强制显示成一行
text-overflow	溢出文本显示省略号	clip：默认值-裁剪。 ellipsis：显示省略号。
text-shadow	文本阴影	阴影偏移、模糊值、颜色

单行长文本显示省略号：

1. 强制将文字显示在一行中
2. 设置溢出部分隐藏
3. 设置溢出文本显示成省略号

css

 /* 将文本强制显示到一行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;

text-shadow 文本阴影的设置规则：

CSS

可以设置阴影偏移位置、阴影模糊值和阴影颜色

css

/* 阴影偏移 */
text-shadow: 3px 3px; 
/* 阴影偏移 颜色 */
text-shadow: 4px 4px #999;
text-shadow: #900 4px 4px;
/* 阴影模糊值 */
text-shadow: 3px 3px 5px;
text-shadow: 3px 3px 15px rgba(0,0,0,.5);

/* 多阴影 */
text-shadow: 1px 1px #bbb, 
            2px 2px #aaa, 
            3px 3px #999,
            4px 4px #888,
            5px 5px #777,
            6px 6px #666;

css

文本阴影

1 文本对齐

text-align 文本水平对齐方式。
取值：
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐。
start：内容对齐开始边界。（CSS3）（CSS3中规定的默认值）
end：内容对齐结束边界。（CSS3）
text-align-last 文本最后一行的对齐方式（如果只有一行，既是第一行，也是最后一行）CSS3新增属性
取值：
auto：无特殊对齐方式。 (默认值)
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐。
start：内容对齐开始边界。
end：内容对齐结束边界。
vertical-align 文本在行框内的垂直对齐方式
取值：
baseline：把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 (默认值)
sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：把当前盒的top和父级的内容区的top对齐
text-bottom：把当前盒的bottom和父级的内容区的bottom对齐
middle：把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top：把当前盒的top与行盒的top对齐
bottom：把当前盒的bottom与行盒的bottom对齐
<percentage>：把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。
<length>：把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。

2文本阴影

text-shadow 设置文本阴影
sh
```
text-shadow：none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3} && <color>?
```
1
取值：
none：无阴影 (默认值)
length①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
length②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
length③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
color: 设置对象的阴影的颜色。

3 文本溢出

text-overflow 设置文本内容溢出容器时的状态
取值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。（默认值）
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。
注意：
要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值。

4 文本换行

word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否断行。
取值：
normal：允许内容顶开或溢出指定的容器边界。（默认值）
break-word：内容将在边界内换行，如果需要，单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同
注意：
IE5.5率先实现了word-wrap，后期被w3c采纳成标准属性；
CSS3中将word-wrap改名为overflow-wrap；
word-break 文本的字内换行行为。
取值：
normal：默认的换行规则。依据各自语言的规则，允许在字间发生换行。（默认值）
keep-all：对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal
break-all：对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。
break-word：与break-all 相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与 word-wrap 的 break-word 值效果相同
white-space 设置元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。
取值：
normal：默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。（默认值）
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示。
pre-wrap：与pre值一致，不同的是文字超出边界时将自动换行。
pre-line：与normal值一致，但是会保留文本输入时的换行。
注意： 控制文本断行，该属性是最常用的

5 文本装饰

text-decoration CSS3变成了复合属性
```
text-decoration：text-decoration-line || text-decoration-style || text-decoration-color
```
1
注意：
所有浏览器均支持 CSS2.1 中的text-decoration属性，在CSS3中，该属性定义被移植到其新的分解属性 text-decoration-line 上；
text-decoration-line 设置文本装饰线的位置
取值：
none：指定文字无装饰（默认值）
underline：指定文字的装饰是下划线
overline：指定文字的装饰是上划线
line-through：指定文字的装饰是贯穿线
blink：指定文字的装饰是闪烁。
text-decoration-style 文本装饰线条的形状
取值：
solid：实线（默认）
double：双线
dotted：点状线条
dashed：虚线
wavy：波浪线
text-decoration-color 文本装饰线条的颜色

6 文本描边

文字描边功能仅 webkit 内核浏览器支持

-webkit-text-fill-color 定义文字填充色
注意：
若同时设置 -webkit-text-fill-color 和 color 属性，-webkit-text-fill-color 定义的颜色将覆盖 color 定义。
-webkit-text-stroke-width 设置文字描边的宽度，取长度单位。
-webkit-text-stroke-color 设置文字描边的颜色，取颜色单位。
-webkit-text-stroke 复合属性，设置文字描边宽度和颜色。

7 其他文本设置

text-transform 设置文本如何转换大小写。
取值：
none：无转换
capitalize：将每个单词的第一个字母转换成大写
uppercase：将每个单词转换成大写
lowercase：将每个单词转换成小写
tab-size 设置内容中制表符的长度。取值长度单位。
取值：
number：用整数值指定制表符的长度。不允许负值。代表空格的倍数(如：tab-size:4; 表示制表符宽度是4个空格的宽度) 。
length：用长度值指定制表符的长度。不允许负值。
注意：
只有当white-space 的属性值为：pre | pre-wrap时，该属性的定义才有效。

CSS3 新增文本属性 ​

1 文本对齐 ​

2文本阴影 ​

3 文本溢出 ​

4 文本换行 ​

5 文本装饰 ​

6 文本描边 ​

7 其他文本设置 ​

CSS3 新增文本属性

1 文本对齐

2文本阴影

3 文本溢出

4 文本换行

5 文本装饰

6 文本描边

7 其他文本设置