小編給大家分享一下純CSS實現(xiàn)“文本溢出截斷省略”的幾種方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計,徐州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:徐州等地區(qū)。徐州做網(wǎng)站價格咨詢:028-86922220
在我們的日常開發(fā)工作中,文本溢出截斷省略是很常見的一種需考慮的業(yè)務(wù)場景細(xì)節(jié)??瓷先?“稀松平常” ,但在實現(xiàn)上卻有不同的區(qū)分,是單行截斷還是多行截斷?多行的截斷判斷是基于行數(shù)還是基于高度?這些問題之下,都有哪些實現(xiàn)方案?他們之間的差異性和場景適應(yīng)性又是如何?
一般來說,在做這樣文字截斷效果時我們更多是希望:
兼容性好,對各大主流瀏覽器有好的支持
響應(yīng)式截斷,根據(jù)不同寬度做出調(diào)整
文本超出范圍才顯示省略號,否則不顯示省略號
省略號位置顯示剛好
基于上述的準(zhǔn)則,下面我們通過編碼實踐,給出一些答案。
單行文本溢出省略
核心 CSS 語句
overflow: hidden;(文字長度超出限定寬度,則隱藏超出的內(nèi)容)
white-space: nowrap;(設(shè)置文字在一行顯示,不能換行)
text-overflow: ellipsis;(規(guī)定當(dāng)文本溢出時,顯示省略符號來代表被修剪的文本)
優(yōu)點
兼容性好,對各大主流瀏覽器有好的支持
響應(yīng)式截斷,根據(jù)不同寬度做出調(diào)整
文本溢出范圍才顯示省略號,否則不顯示省略號
省略號位置顯示剛好
短板
只支持單行文本截斷,并不支持多行
適用場景
適用于單行文本溢出顯示省略號的情況
Demo
<div class="demo"> 床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光 </div>
.demo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
效果示例
多行文本溢出省略(-webkit-line-clamp)
核心 CSS 語句
overflow: hidden;(文本溢出限定的寬度就隱藏內(nèi)容)
-webkit-line-clamp: 2;(用來限制在一個塊元素顯示的文本的行數(shù), 2 表示最多顯示 2 行。 為了實現(xiàn)該效果,它需要組合其他的WebKit屬性)
display: -webkit-box;(和 -webkit-line-clamp: 2;結(jié)合使用,將對象作為彈性伸縮盒子模型顯示 )
-webkit-box-orient: vertical;(和 -webkit-line-clamp: 2;結(jié)合使用 ,設(shè)置或檢索伸縮盒對象的子元素的排列方式 )
text-overflow: ellipsis;(多行文本的情況下,用省略號“…”隱藏溢出范圍的文本)
優(yōu)點
響應(yīng)式截斷,根據(jù)不同寬度做出調(diào)整
文本溢出范圍才顯示省略號,否則不顯示省略號
瀏覽器原生實現(xiàn),所以省略號位置顯示剛好
短板
兼容性一般: -webkit-line-clamp 屬性只有 WebKit 內(nèi)核的瀏覽器才支持
適用場景
多適用于移動端頁面,因為移動設(shè)備瀏覽器更多是基于 WebKit 內(nèi)核
Demo
<div class="demo"> 床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光 </div>
.demo { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
效果示例
多行文本溢出省略(偽元素 + 定位)
核心 CSS 語句
position: relative; (為偽元素絕對定位)
overflow: hidden; (文本溢出限定的寬度就隱藏內(nèi)容)
position: absolute;(給省略號絕對定位)
line-height: 18px; (結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù))
height: 36px; (設(shè)定當(dāng)前元素高度)
::after {} (設(shè)置省略號樣式)
word-break: break-all; (如果文本中有英文,可以使一個單詞能夠在換行時進(jìn)行拆分)
優(yōu)點
兼容性好,對各大主流瀏覽器有好的支持
響應(yīng)式截斷,根據(jù)不同寬度做出調(diào)整
短板
無法識別文字的長短,無論文本是否溢出范圍,一直顯示省略號省略號
顯示可能不會剛剛好,有時會遮住一半文字,跟文字沒有貼合的很緊密
適用場景
文字內(nèi)容較多,確定文字內(nèi)容一定會超過容器的
Demo
<div class="demo"> 床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光 </div>
.demo { position: relative; line-height: 18px; height: 36px; overflow: hidden; word-break: break-all; } .demo::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; /* 為了展示效果更好 */ background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }
效果示例
多行文本溢出省略(Float)
核心 CSS 語句
line-height: 20px;(結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù))
overflow: hidden;(文本溢出限定的寬度就隱藏內(nèi)容)
float: right/left;(利用元素浮動的特性實現(xiàn))
position: relative;(根據(jù)自身位置移動省略號位置, 實現(xiàn)文本溢出顯示省略號效果)
word-break: break-all;(如果文本中有英文,可以使一個單詞能夠在換行時進(jìn)行拆分)
優(yōu)點
兼容性好,對各大主流瀏覽器有好的支持
響應(yīng)式截斷,根據(jù)不同寬度做出調(diào)整
文本溢出范圍才顯示省略號,否則不顯示省略號
短板
省略號顯示可能不會剛剛好,有時會遮住一半文字,跟文字沒有貼合的很緊密
適用場景
文字內(nèi)容較多,確定文字內(nèi)容一定會超過容器的
Demo
<div class="demo"> <div class="text"> 床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光 </div> </div>
.demo { height: 40px; line-height: 20px; overflow: hidden; } .demo .text { float: right; margin-left: -5px; width: 100%; word-break: break-all; } .demo::before { float: left; width: 5px; content: ""; height: 40px; } .demo::after { float: right; content: "..."; height: 20px; line-height: 20px; padding-right: 5px; text-align: right; width: 3em; margin-left: -3em; position: relative; left: 100%; top: -20px; padding-right: 5px; /* 為了展示效果更好 */ background: -webkit-gradient( linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white) ); background: -moz-linear-gradient( to right, rgba(255, 255, 255, 0), white 50%, white ); background: -o-linear-gradient( to right, rgba(255, 255, 255, 0), white 50%, white ); background: -ms-linear-gradient( to right, rgba(255, 255, 255, 0), white 50%, white ); background: linear-gradient( to right, rgba(255, 255, 255, 0), white 50%, white ); }
效果示例
看完了這篇文章,相信你對“純CSS實現(xiàn)“文本溢出截斷省略”的幾種方法”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
分享名稱:純CSS實現(xiàn)“文本溢出截斷省略”的幾種方法
轉(zhuǎn)載源于:http://www.rwnh.cn/article34/jispse.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、用戶體驗、網(wǎng)站內(nèi)鏈、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)