理解CSS文本属性

color

设置文本的颜色，默认有继承性。属性值可以是颜色名、十六进制颜色值、rgb值，inherit关键字。

direction

设置文本的书写方向，默认值ltr，有继承性。属性值rtl，文本方向从右向左。inherit继承。

 <p >Hello world.<p>
 <p >Hello world.<p>

结果：

Hello world.

Hello world.

个人理解，rtl就是把文本的标点符号移到了左边，然后text-align: right。

letter-spacing

设置字符间距，即字符之间增加或减少的空白距离，有继承性，默认值normal，normal相当于0。属性值可以是CSS长度单位，正负值均可，为正数时表示空白增加的距离，为负数时表示空白减少的距离。需要注意的是浏览器是通过改变每个字母的空白大小来调整距离，所以单词之间的空白也是会增加会较少的。

<p >Hello World</p>

结果：

Hello World

text-align

text-align定义文本对齐的方向，有继承性，适用于inline元素和inline-block属性。如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。属性值left表示文本左对齐，right文本右对齐，justify两端对齐，inherit继承。

需要注意text-align: justify并不能对齐最后一行文本，两端对齐就是文本的左边对齐父盒子的左边，右边对齐父盒子的右边。

text-decoration

text-decoration规定添加到文本的修饰，默认值none。属性值underline定义文本的下划线，line-through文本的中划线，overline定义文本的上划线。

<p >Hello World</p>
<p >Hello World</p>
<p >Hello World</p>

Hello World

Hello World

Hello World

text-indent

text-indext定义文本首行缩进距离，默认值0，有继承性。属性值可以是CSS长度单位，当属性值是百分比时是基于父元素的宽度，inherit继承父元素。

<p >唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变</p>

结果：

唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变唯一不变的是改变

该属性仅适用于p元素

text-shadow

定义文本阴影效果，默认值none。类似于定义盒子的阴影，文本阴影有四个值：x轴偏移 y轴偏移 模糊半径 阴影颜色值。和box-shadow对比一下，text-shadow没有阴影扩展和内部阴影这两项设置。

一些常见文本效果：

text-transform

该属性改变元素中字母的大小写，默认值none定义标准文本，有继承性。属性值capitalize表示每个单词的首字母大写，属性值uppercase表示所有字母大写显示，属性值lowercase表示所有字母小写显示，inherit继承。

<p >hello-world</p>
<p >hello-world</p>
<p >Hello-World</p>

结果：

hello-world

hello-world

Hello-World

单词之间不仅可以是连字符，其他分隔符也能正常匹配首字母，并改变其大小写。

white-space

white-space定义如何处理元素内的空白，默认值normal，有继承性。属性值pre表示象pre标签那样处理内容，保留所有空白符。nowrap表示不保留空白符。pre-wrap表示保留所有空白符，并自动换行。pre-line合并空白符，只保留第一行空白符，自动换行。

属性值效果可参考以上例子

word-spacing

word-spacing定义元素中字符之间插入或减少的空白符，默认值normal，相当于属性值0，有继承性。“字符”指的是由空白符间隔的字符串。属性值可以为负值，使文字更加紧凑。inherit继承。

需要注意的是它和letter-spacing的不同，word-spacing只改变由空格间隔的字符的间距，而letter-spacing改变的是每个字符的间距

属性值效果可参考以上例子

text-overflow

text-overflow规定当文本溢出时如何处理，默认值clip溢出裁剪。属性值ellipsis表示溢出时显示省略号。

属性值效果可参考以上例子

word-break

word-break规定非中日韩文本换行的处理方法，默认值normal浏览器自己的换行规则，有继承性。属性值break-all表示文本到达父容器边缘换行，也就是会在单词内换行，通常在显示源代码时会使用该属性值。属性值keep-all表示遇到半角空格或连字符时换行，经测试chrome下keep-all和normal效果一致，这是正常的效果。

属性值效果可参考以上例子

word-wrap

word-wrap规定长单词或URL的换行处理方法，默认值normal，有继承性。属性值break-word表示允许长单词或URL内部换行，所谓长单词就是一行放不下，这种情况很少见，通常用于处理URL。

属性值效果可参考以上例子