Text Effects and Typographic Styles
CSS中默認(rèn)的坐標(biāo)軸原點在元素左上角。
text-shadow
此屬性為文本添加陰影效果恩掷，需要指定陰影的坐標(biāo)位置甩挫。
E { text-shadow: x y; }
陰影的默認(rèn)顏色是從其父元素繼承而來的闷叉，也可以指定陰影顏色疤坝。
E { text-shadow: x y color; }
陰影還可以有模糊效果伐弹，blur-radius 設(shè)置模糊效果的范圍，默認(rèn)值是0帅韧，不能為負(fù)值爬范。
E { text-shadow: x y blur-radius color; }
來看下面的例子，先不設(shè)置模糊效果：
<h1 class="one">E { text-shadow: x y blur-radius color; }</h1>
<h1 class="two">E { text-shadow: x y blur-radius color; }</h1>
<h1 class="three">E { text-shadow: x y blur-radius color; }</h1>
h1{font-size: 50px}
.one { text-shadow: -3px -3px #8cc83f; }
.two { text-shadow: -5px 3px #8cc83f; }
.three { text-shadow: -5px 0 #8cc83f; }
設(shè)置模糊效果后：
.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; }
<h1 class="one">text-shadow: value, value, value;</h1>
<h1 class="two">text-shadow: value, value, value;</h1>
.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 屬性用來對處理文本內(nèi)容的溢出青瀑。
E { text-overflow: keyword; }
可用的關(guān)鍵字有 clip 和 ellipsis，默認(rèn)值是clip萧诫。
clip斥难，如果文本內(nèi)容超出其容器的寬度，直接截斷帘饶；ellipsis哑诊，如果超出，文本的最后變成省略號及刻。
此屬性要配合其他兩個屬性一起使用：
overflow: hidden;
white-space: nowrap;
white-space 屬性用來設(shè)置如何處理元素內(nèi)的空白镀裤。 沒想到，最常用的竟然是不讓文本換行...
white-space的值 |
描述 |
|---|---|
| normal | 默認(rèn)缴饭∈钊埃空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留颗搂。其行為方式類似 HTML 中的 <pre>標(biāo)簽担猛。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續(xù)丢氢，直到遇到 <br> 標(biāo)簽為止傅联。 |
| pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行疚察。 |
| pre-line | 合并空白符序列蒸走，但是保留換行符。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值貌嫡。 |
Aligning text
text-align 并不是在CSS3中才定義比驻，CSS3為其添加了兩個值：start, end，如果文本方向是從左到右衅枫，那么 start 對就 left嫁艇，end 對應(yīng) right。
text-align的值 |
描述 |
|---|---|
| left | 把文本排列到左邊弦撩。默認(rèn)值：由瀏覽器決定 |
| right | 把文本排列到右邊 |
| center | 把文本排列到中間 |
| justify | 實現(xiàn)兩端對齊文本效果 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值 |
text-align-last 用來處理段落的最后一行如何對齊步咪，其關(guān)鍵字同text-align。
E { text-align-last: keyword; }
Controlling line wrapping
word-wrap益楼，如其名猾漫，控制是否允許讓單詞換行点晴，其值可以是：normal, break-word。
E { word-wrap: keyword; }
Resizing elements
resize屬性悯周，可以拖拽元素來改變其大小粒督，注意，只能往更寬和更高的方向拖拽禽翼。其關(guān)鍵字有屠橄，horizontal, vertical, both, none。
實測發(fā)現(xiàn)闰挡，必須和overflow屬性一起使用才有效锐墙。
p {
overflow: hidden;
resize: both;
}
由于瀏覽器支持的不好，文章中忽略掉的屬性：
E{ hyphens: keyword; } /* manual, auto, none 通過連字符來換行 */
E{ text-overflow: ellipsis ellipsis; } /* 此屬性支持兩個值长酗，第一個設(shè)置文本結(jié)尾溪北，第二個設(shè)置文本開始處*/
E{ text-overflow: '~'; } /* 被用來設(shè)置代替省略號 */
此文是對《The Book of CSS3 2nd edition》第6章的歸納，方便以后查閱夺脾。
感謝其作者Peter Gasston !
