CSS3的文本特性

CSS3 文本
在Web頁(yè)面或者Web應(yīng)用程序中設(shè)置文本樣式是CSS最基本的要求， 早期的CSS文本功能就是給Web頁(yè)面設(shè)置文本的字體、字號(hào)、顏色、樣式、粗細(xì)、間距等。 隨著CSS3的出現(xiàn)，文本功能不僅僅局限于這些基本的運(yùn)用，它給文本功能添加了一些高級(jí)的屬性設(shè)置， 如文本陰影屬性text-shadow、文本自動(dòng)換行屬性word- break、 長(zhǎng)單詞與URL地址自動(dòng)換行屬性word-wrap和文本溢出屬性text-overflow等，在 CSS文本功能上主要分為三大類： 字體、 顏色和文本，text-shadow 屬性一共包含4個(gè)屬性參數(shù)， 每個(gè)屬性參數(shù)都具有自己的作用。
-color：陰影顏色，定義繪制陰影時(shí)所使用的顏色，這個(gè)參數(shù)可以放在第一也可以放在最后，是一個(gè)可選參數(shù)，如果沒有顯式設(shè)置陰影顏色，會(huì)使用文本的顏色作為陰影顏色。 陰影顏色可以是顏色關(guān)鍵詞、十六進(jìn)制顏色、RGB顏色、RGBA透明色等。
-x-offset： X軸位移， 用來(lái)指定陰影水平位移量，其值可以是正負(fù)值，如果為正值，陰影在對(duì)象的右邊，反之陰影在對(duì)象的左邊。
-y-offset： Y軸位移， 用來(lái)指定陰影垂直方向偏移量，其值可以是正負(fù)值，如果為正值，陰影在對(duì)象的底部，反之陰影在對(duì)象的頂部。
-blur-radius： 陰影模糊半徑，可選參數(shù)，用來(lái)設(shè)置陰影的模糊半徑，代表陰影向外模糊的模糊范圍。這個(gè)值越大，陰影向外模糊的范圍越大，陰影的邊緣就越 模糊。不過(guò)這個(gè)值只能是正值，其值為0時(shí)，表示陰影不具有模糊效果。
可以使用text-shadow屬性來(lái)給文本指定多個(gè)陰影， 并且針對(duì)每個(gè)陰影使用不同顏色。 指定多個(gè)陰影時(shí)使用逗號(hào)將多個(gè)陰影進(jìn)行分隔。 text- shadow 多陰影效果按照給定的順序應(yīng)用， 因此前面的陰影有可能會(huì)覆蓋后面的， 但是它們永遠(yuǎn)會(huì)覆蓋文本本身。

10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有莊浪免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1. CSS3 溢出文本
   CSS3溢出文本屬性平時(shí)在網(wǎng)頁(yè)制作中一定碰到過(guò)內(nèi)容溢出的問(wèn)題， 如文章列表標(biāo)題很長(zhǎng)， 而其寬度又受到限制， 此時(shí)超出寬度的內(nèi)容就會(huì)以省略 標(biāo)記（…） 顯示。 以前實(shí)現(xiàn)這樣的效果都是由后臺(tái)程序截取一定的字符數(shù)在前臺(tái)輸出，另外一種方法就是使用JavaScript截取一定的字符數(shù)實(shí)現(xiàn)。可是這兩種方法都有其 不足之處，如中文和英文的計(jì)算字符寬度的問(wèn)題，這個(gè)值不好計(jì)算，所以造成截取字符數(shù)不好控制，從而其通用性也差。 CSS3新增了text-overflow 屬性， 使得 這個(gè)問(wèn)題迎刃而解。
   text-overflow 屬性參數(shù)比較簡(jiǎn)單， 只有兩個(gè)屬性值。
   -clip： 不顯示省略標(biāo)記（…）， 只是簡(jiǎn)單的裁切。
   -ellipsis： 文本溢出時(shí)顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個(gè)字符。
   強(qiáng)制文本在一行顯示（ white- space: nowrap）和溢出內(nèi)容隱藏（overflow: hidden），并且需要定義容器的寬度。
   text-overflow: ellipsis; overflow: hidden; 有省略號(hào)，需要這兩個(gè)屬性配合才有效，
   text-overflow: clip; overflow: hidden; 直接隱藏，需要這兩個(gè)屬性配合才有效，
2. CSS3 文本換行
   http:/ /www.iis7.com/b/wzjk/
   在CSS3中，使用word-wrap：break-word屬性實(shí)現(xiàn)長(zhǎng)單詞與URL地址的自動(dòng)換行。
   -break-all：可以強(qiáng)行截?cái)嘤⑽膯卧~， 達(dá)到詞內(nèi)換行效果。
   -keep-all：不允許字?jǐn)嚅_。如果是中文把前后標(biāo)點(diǎn)符號(hào)內(nèi)的一個(gè)漢字短語(yǔ)整個(gè)換行，英文單詞整個(gè)換行；如果出現(xiàn)某個(gè)英文字符長(zhǎng)度超過(guò)容器邊界，后面的部分將撐破容器； 如果邊框?yàn)楣潭▽傩裕?則后面部分無(wú)法顯示。
   white-space 屬性主要用來(lái)聲明建立布局過(guò)程中如何處理元素中的空白符。
   white-space 屬性取值簡(jiǎn)單說(shuō)明如下：
   -normal： 默認(rèn)值。 空白處會(huì)被瀏覽器忽略。 可以通過(guò)這個(gè)值恢復(fù)到屬性的默認(rèn)值。
   -pre： 文本空白處會(huì)被瀏覽器扣留，其行為方式類似于HTML中的<pre>標(biāo)簽效果。
   -nowrap： 文本不會(huì)換行，文本會(huì)在同一行上，直到碰到換行標(biāo)簽<br/>為止。
   -pre- line： 合并空白符序列，但保留換行符，此屬性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本瀏覽器。
   -pre- wrap： 保留空白符序列， 但是正常進(jìn)行換行， 此屬性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本瀏覽器。
   -inherit： 繼承父元素的white-space 屬性值， 此屬性值在所有的 IE瀏覽器都不支持。

名稱欄目：CSS3的文本特性
URL分享：http://muchs.cn/article34/johose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、虛擬主機(jī)、網(wǎng)站策劃、全網(wǎng)營(yíng)銷推廣、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)