建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下css怎么實(shí)現(xiàn)單行、多行文本超出顯示省略效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出沂水免費(fèi)做網(wǎng)站回饋大家。
.ellipsis-line{
border:1pxsolid#f70505;
padding:8px;
width:400px;
overflow:hidden;
text-overflow:ellipsis;//文本溢出顯示省略號
white-space:nowrap;//文本不會換行
}
語法：
text-overflow:clip/ellipsis;
默認(rèn)值：clip
適用于：所有元素
clip：當(dāng)對象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記（…），而是將溢出的部分裁切掉。
ellipsis：當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）。
在使用的時(shí)候，有時(shí)候發(fā)現(xiàn)不會出現(xiàn)省略標(biāo)記效果，經(jīng)過測試發(fā)現(xiàn)，使用ellipsis的時(shí)候，必須配合overflow:hidden;white-space:nowrap;width:具體值；這三個(gè)樣式共同使用才會有效果。
多行文本省略
直接用css屬性-webkit-line-clamp：n;設(shè)置
在WebKit瀏覽器或移動端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面實(shí)現(xiàn)比較簡單，可以直接使用WebKit的CSS擴(kuò)展屬性（WebKit是私有屬性）-webkit-line-clamp；注意：這是一個(gè)不規(guī)范的屬性（unsupportedWebKitproperty），它沒有出現(xiàn)在CSS規(guī)范草案中。
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結(jié)合屬性：
display:-webkit-box;必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對象的子元素的排列方式。
text-overflow:ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本。
這個(gè)屬性只合適WebKit瀏覽器或移動端（絕大部分是WebKit內(nèi)核的）瀏覽器
.multi-line{
border:1pxsolid#f70505;
width:400px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
以上是“css怎么實(shí)現(xiàn)單行、多行文本超出顯示省略效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章名稱：css怎么實(shí)現(xiàn)單行、多行文本超出顯示省略效果
文章URL：http://fisionsoft.com.cn/article/jphjgs.html
