CSS3文字模塊有哪些屬性

這篇文章主要介紹“CSS3文字模塊有哪些屬性”，在日常操作中，相信很多人在CSS3文字模塊有哪些屬性問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3文字模塊有哪些屬性”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

    CSS2.1的文字模塊包括text-align、line-height、text-decoration等基本屬性，而css3添加了多種增強的文字效果，包括文字陰影、文字溢出和文字換行。

    文字陰影：text-shadow

    在CSS2.1時代，除非使用圖片，否則無法為文字添加陰影效果?，F(xiàn)在利用text-shadow屬性就可以為文字添加陰影。

    文字陰影有以下兩種格式：

    text-shadow:[顏色]水平偏移縱向偏移[模糊半徑]

    text-shadow:水平偏移縱向偏移[模糊半徑][顏色]

    其中顏色和模糊半徑是可選值。顏色未指定時，將和文本顏色一致；模糊半徑未指定時，其值為0。

    可以將多個文字陰影進行疊加，中間使用逗號進行分隔，例如：

    text-shadow:2px2px6pxorange,3px-2px4pxblue;

    注意在Chrome中，text-shadow的陰影模糊度將會影響文字清晰度，因為它會對文字進行模糊，而其他瀏覽器表現(xiàn)正常。

    文字溢出：text-overflow

    text-overflow用于當容器內(nèi)的文字溢出時，設(shè)置如何省略溢出的內(nèi)容。以前要達到這樣的目的，必須要使用復雜的JavaScript代碼。

    文字溢出可以設(shè)置的值有兩個，即clip（英文含義是截?。┖蚭llipsis（英文含義是省略號）。clip表示對文字按照溢出的邊界在顯示上進行簡單的裁切；ellipsis表示文字溢出時，在溢出的地方顯示省略號，它只能用于水平方向的一行文字。

    注意text-overflow必須和overflow:hidden一起使用才能起作用。而text-overflow:ellipsis在塊級元素上使用時會存在問題，各個瀏覽器支持情況還不一致，所以請確保不要在包含塊級元素（例如DIV）的元素上使用text-overflow:ellipsis。

    文字換行：word-wrap

    微軟公司最先提出了文字換行屬性。CSS3提供了對這一屬性的支持，允許長單詞在段間進行換行。它有兩個值供選擇，即normal和break-word。normal是默認值，表示在段間不折行，一個長單詞在超出容器邊界后將繼續(xù)顯示，

    break-word使一個單詞在段間折斷后換行顯示，

到此，關(guān)于“CSS3文字模塊有哪些屬性”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>