前面的話

　　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

style="width: 100%; height: 600px;" src="https://demo.xiaohuochai.site/css/textoverflow/t1.html" frameborder="0" width="320" height="240">

【多行文本溢出】

　　在webkit瀏覽器中，有一個不規范的屬性-webkit-line-clamp，它可以實現多行文本溢出。它的值是一個<number>，設置為幾，便可以設置相應數字的文本溢出

　　設置多行文本溢出，還需要配合其他樣式，樣式如下

/*溢出隱藏*/ overflow:hidden; /*舊版本flex*/ display:-webkit-box; /*舊版伸縮流方向為垂直方向*/ -webkit-box-orient:vertical; /*溢出隱藏3行*/ -webkit-line-clamp: 3;

　　實例如下

<div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">我是測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字 </div>

style="width: 100%; height: 90px;" src="https://demo.xiaohuochai.site/css/textoverflow/t2.html" frameborder="0" width="320" height="240">

　　[注意]不要顯式地設置高度，而應該讓其自適應高度，否則會造成如下效果

<div style="width:300px;height: 75px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">我是測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字 </div>

style="width: 100%; height: 100px;" src="https://demo.xiaohuochai.site/css/textoverflow/t3.html" frameborder="0" width="320" height="240">

?

文本陰影

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

定義

text-shadow

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

　　初始值: none

　　應用于: 所有元素

　　繼承性: 無

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

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

style="width: 100%; height: 320px;" src="https://demo.xiaohuochai.site/css/textoverflow/t4.html" frameborder="0" width="320" height="240">

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

style="width: 100%; height: 50px;" src="https://demo.xiaohuochai.site/css/textoverflow/t5.html" frameborder="0" width="320" height="240">

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

常見效果

style="width: 100%; height: 400px;" src="https://demo.xiaohuochai.site/css/textoverflow/t6.html" frameborder="0" width="320" height="240">

【文字陰影代碼查看】

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的文本溢出text-overflow和文本阴影text-shadow的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。