文本溢出text-overflow和文本陰影text-shadow

目錄

前面的話

　　CSS3新增了一些關於文本的樣式，其中text-overflow文本溢出和text-shadow文本陰影有些特別。因為它們有對應的overflow溢出屬性和box-shadow盒子陰影屬性。本文將詳細介紹這兩個作用在文本上的溢出和陰影屬性

文本溢出

　　一般地，人們一提到文本溢出，想到的就是文本溢出的經典代碼

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

　　但實際上，文本換行不一定非要使用white-space；overflow屬性值也不一定非要使用hidden。

定義

text-overflow

　　值: clip | ellipsis

　　初始值: clip

　　應用於: 塊級元素、替換元素、表單元格

　　繼承性: 無

clip: 不顯示省略標記(...)，只是簡單的裁切，相當於無效果
ellipsis: 文本溢出時顯示省略標記(...)，省略標記插入的位置是最後一個字元

　　[註意]當文本溢出屬性應用於表單元格時，需要設置table-layout:fixed

　　[註意]該屬性相容性很好，相容IE6+的主流瀏覽器及移動端iso和android

實現

【1】當存在長英文文本時，text-overflow屬性起作用的前提是

overflow(或overflow-y或overflow-x):hidden | auto | scroll

【2】當文本為漢字時，text-overflow屬性起作用的前提是

實現漢字不自動換行可使用word-break: keep-all; 或 white-space: nowrap;
overflow(或overflow-y或overflow-x):hidden | auto | scroll

文本陰影

　　類似於盒子陰影，文本陰影也有x軸偏移、y軸偏移、模糊半徑和陰影顏色這四個值，但是並沒有陰影尺寸和內部陰影這兩個值

定義

text-shadow

　　值: none | (h-shadow v-shadow blur color)+

　　初始值: none

　　應用於: 所有元素

　　繼承性: 無

h-shadow: 水平陰影位置(必須)
v-shadow: 垂直陰影位置(必須)
blur:     模糊距離(該值不能為負值，可選)
color:    陰影顏色，預設和文本顏色一致(可選) 

　　[註意]該屬性IE9-瀏覽器不支持

//多層陰影
text-shadow: 1px 1px blue,5px 5px 5px red;

　　[註意]不要加太多層陰影，會有性能問題

常見效果

【文字陰影代碼查看】