CSS3的文本特性
阿新 • • 發佈：2018-10-05
radi 容器 取值 溢出 斷開 nowrap 簡單的 可選參數 邊緣 CSS3 文本
在Web頁面或者Web應用程序中設置文本樣式是CSS最基本的要求， 早期的CSS文本功能就是給Web頁面設置文本的字體、字號、顏色、樣式、粗細、間距等。 隨著CSS3的出現，文本功能不僅僅局限於這些基本的運用，它給文本功能添加了一些高級的屬性設置， 如文本陰影屬性text-shadow、文本自動換行屬性word- break、 長單詞與URL地址自動換行屬性word-wrap和文本溢出屬性text-overflow等，在 CSS文本功能上主要分為三大類： 字體、 顏色和文本，text-shadow 屬性一共包含4個屬性參數， 每個屬性參數都具有自己的作用。
-color：陰影顏色，定義繪制陰影時所使用的顏色，這個參數可以放在第一也可以放在最後，是一個可選參數，如果沒有顯式設置陰影顏色，會使用文本的顏色作為陰影顏色。 陰影顏色可以是顏色關鍵詞、十六進制顏色、RGB顏色、RGBA透明色等。
-y-offset： Y軸位移， 用來指定陰影垂直方向偏移量，其值可以是正負值，如果為正值，陰影在對象的底部，反之陰影在對象的頂部。
-blur-radius： 陰影模糊半徑，可選參數，用來設置陰影的模糊半徑，代表陰影向外模糊的模糊範圍。這個值越大，陰影向外模糊的範圍越大，陰影的邊緣就越 模糊。不過這個值只能是正值，其值為0時，表示陰影不具有模糊效果。
可以使用text-shadow屬性來給文本指定多個陰影， 並且針對每個陰影使用不同顏色。 指定多個陰影時使用逗號將多個陰影進行分隔。 text- shadow 多陰影效果按照給定的順序應用， 因此前面的陰影有可能會覆蓋後面的， 但是它們永遠會覆蓋文本本身。
在Web頁面或者Web應用程序中設置文本樣式是CSS最基本的要求， 早期的CSS文本功能就是給Web頁面設置文本的字體、字號、顏色、樣式、粗細、間距等。 隨著CSS3的出現，文本功能不僅僅局限於這些基本的運用，它給文本功能添加了一些高級的屬性設置， 如文本陰影屬性text-shadow、文本自動換行屬性word- break、 長單詞與URL地址自動換行屬性word-wrap和文本溢出屬性text-overflow等，在 CSS文本功能上主要分為三大類： 字體、 顏色和文本，text-shadow 屬性一共包含4個屬性參數， 每個屬性參數都具有自己的作用。
-color：陰影顏色，定義繪制陰影時所使用的顏色，這個參數可以放在第一也可以放在最後，是一個可選參數，如果沒有顯式設置陰影顏色，會使用文本的顏色作為陰影顏色。 陰影顏色可以是顏色關鍵詞、十六進制顏色、RGB顏色、RGBA透明色等。
-y-offset： Y軸位移， 用來指定陰影垂直方向偏移量，其值可以是正負值，如果為正值，陰影在對象的底部，反之陰影在對象的頂部。
-blur-radius： 陰影模糊半徑，可選參數，用來設置陰影的模糊半徑，代表陰影向外模糊的模糊範圍。這個值越大，陰影向外模糊的範圍越大，陰影的邊緣就越 模糊。不過這個值只能是正值，其值為0時，表示陰影不具有模糊效果。
可以使用text-shadow屬性來給文本指定多個陰影， 並且針對每個陰影使用不同顏色。 指定多個陰影時使用逗號將多個陰影進行分隔。 text- shadow 多陰影效果按照給定的順序應用， 因此前面的陰影有可能會覆蓋後面的， 但是它們永遠會覆蓋文本本身。
- CSS3 溢出文本
CSS3溢出文本屬性平時在網頁制作中一定碰到過內容溢出的問題， 如文章列表標題很長， 而其寬度又受到限制， 此時超出寬度的內容就會以省略 標記（…） 顯示。 以前實現這樣的效果都是由後臺程序截取一定的字符數在前臺輸出，另外一種方法就是使用JavaScript截取一定的字符數實現。可是這兩種方法都有其 不足之處，如中文和英文的計算字符寬度的問題，這個值不好計算，所以造成截取字符數不好控制，從而其通用性也差。 CSS3新增了text-overflow 屬性， 使得 這個問題迎刃而解。
text-overflow 屬性參數比較簡單， 只有兩個屬性值。
-clip： 不顯示省略標記（…）， 只是簡單的裁切。-ellipsis： 文本溢出時顯示省略標記（…），省略標記插入的位置是最後一個字符。
強制文本在一行顯示（ white- space: nowrap）和溢出內容隱藏（overflow: hidden），並且需要定義容器的寬度。
text-overflow: ellipsis; overflow: hidden; 有省略號，需要這兩個屬性配合才有效，
text-overflow: clip; overflow: hidden; 直接隱藏，需要這兩個屬性配合才有效， - CSS3 文本換行
http:/ /www.iis7.com/b/wzjk/
在CSS3中，使用word-wrap：break-word屬性實現長單詞與URL地址的自動換行。
-break-all：可以強行截斷英文單詞， 達到詞內換行效果。
-keep-all：不允許字斷開。如果是中文把前後標點符號內的一個漢字短語整個換行，英文單詞整個換行；如果出現某個英文字符長度超過容器邊界，後面的部分將撐破容器； 如果邊框為固定屬性， 則後面部分無法顯示。
white-space 屬性主要用來聲明建立布局過程中如何處理元素中的空白符。
white-space 屬性取值簡單說明如下：
-normal： 默認值。 空白處會被瀏覽器忽略。 可以通過這個值恢復到屬性的默認值。
-pre： 文本空白處會被瀏覽器扣留，其行為方式類似於HTML中的<pre>標簽效果。
-nowrap： 文本不會換行，文本會在同一行上，直到碰到換行標簽<br/>為止。
-pre- line： 合並空白符序列，但保留換行符，此屬性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本瀏覽器。
-pre- wrap： 保留空白符序列， 但是正常進行換行， 此屬性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本瀏覽器。
-inherit： 繼承父元素的white-space 屬性值， 此屬性值在所有的 IE瀏覽器都不支持。
CSS3的文本特性