Text Effects and Typographic Styles
thebookofcss3-chapter-06
CSS中默认的坐标轴原点在元素左上角。
text-shadow
此属性为文本添加阴影效果，需要指定阴影的坐标位置。
E { text-shadow: x y; }
阴影的默认颜色是从其父元素继承而来的，也可以指定阴影颜色。
E { text-shadow: x y color; }
阴影还可以有模糊效果，blur-radius 设置模糊效果的范围，默认值是0，不能为负值。
E { text-shadow: x y blur-radius color; }
来看下面的例子，先不设置模糊效果：
E { text-shadow: x y blur-radius color; }
E { text-shadow: x y blur-radius color; }
E { text-shadow: x y blur-radius color; }
h1{font-size: 50px}
.one { text-shadow: -3px -3px #8cc83f; }
.two { text-shadow: -5px 3px #8cc83f; }
.three { text-shadow: -5px 0 #8cc83f; }
设置模糊效果后：
.one { text-shadow: -3px -3px 3px #8cc83f; }
.two { text-shadow: -5px 3px 5px #8cc83f; }
.three { text-shadow: -5px 0 10px #8cc83f; }
同时使用多个阴影效果
text-shadow 支持同时使用多个阴影效果。
E { text-shadow: value, value, value; }
text-shadow: value, value, value;
text-shadow: value, value, value;
.one { text-shadow: 0 -2px 2px #8cc83f, 2px -4px 2px #6ab8c8, 4px -6px 2px #c063c8; }
.two { text-shadow: -8px 6px 9px #c8160f, -5px 4px 6px #c8c81f, -2px 2px 3px #33adcb; }
Restricting overflow
text-overflow 属性用来对处理文本内容的溢出。
E { text-overflow: keyword; }
可用的关键字有 clip 和 ellipsis，默认值是clip。
clip，如果文本内容超出其容器的宽度，直接截断；ellipsis，如果超出，文本的最后变成省略号。
此属性要配合其他两个属性一起使用：
overflow: hidden;
white-space: nowrap;
white-space 属性用来设置如何处理元素内的空白。 没想到，最常用的竟然是不让文本换行...
white-space的值 |
描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
Aligning text
text-align 并不是在CSS3中才定义，CSS3为其添加了两个值：start, end，如果文本方向是从左到右，那么 start 对就 left，end 对应 right。
text-align的值 |
描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承 text-align 属性的值 |
text-align-last 用来处理段落的最后一行如何对齐，其关键字同text-align。
E { text-align-last: keyword; }
Controlling line wrapping
word-wrap，如其名，控制是否允许让单词换行，其值可以是：normal, break-word。
E { word-wrap: keyword; }
Resizing elements
resize属性，可以拖拽元素来改变其大小，注意，只能往更宽和更高的方向拖拽。其关键字有，horizontal, vertical, both, none。
实测发现，必须和overflow属性一起使用才有效。
p {
overflow: hidden;
resize: both;
}
由于浏览器支持的不好，文章中忽略掉的属性：
E{ hyphens: keyword; } /* manual, auto, none 通过连字符来换行 */
E{ text-overflow: ellipsis ellipsis; } /* 此属性支持两个值，第一个设置文本结尾，第二个设置文本开始处*/
E{ text-overflow: '~'; } /* 被用来设置代替省略号 */
此文是对《The Book of CSS3 2nd edition》第6章的归纳，方便以后查阅。
感谢其作者Peter Gasston !