css怎么實(shí)現(xiàn)單行、多行文本超出顯示省略效果

小編給大家分享一下css怎么實(shí)現(xiàn)單行、多行文本超出顯示省略效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　.ellipsis-line{

　　border:1pxsolid#f70505;

　　padding:8px;

　　width:400px;

　　overflow:hidden;

　　text-overflow:ellipsis;//文本溢出顯示省略號(hào)

　　white-space:nowrap;//文本不會(huì)換行

　　}

　　語(yǔ)法：

　　text-overflow:clip/ellipsis;

　　默認(rèn)值：clip

　　適用于：所有元素

　　clip：當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記（…），而是將溢出的部分裁切掉。

　　ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）。

　　在使用的時(shí)候，有時(shí)候發(fā)現(xiàn)不會(huì)出現(xiàn)省略標(biāo)記效果，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，使用ellipsis的時(shí)候，必須配合overflow:hidden;white-space:nowrap;width:具體值；這三個(gè)樣式共同使用才會(huì)有效果。

　　多行文本省略

　　直接用css屬性-webkit-line-clamp：n;設(shè)置

　　在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁(yè)面實(shí)現(xiàn)比較簡(jiǎn)單，可以直接使用WebKit的CSS擴(kuò)展屬性（WebKit是私有屬性）-webkit-line-clamp；注意：這是一個(gè)不規(guī)范的屬性（unsupportedWebKitproperty），它沒(méi)有出現(xiàn)在CSS規(guī)范草案中。

　　-webkit-line-clamp用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見(jiàn)結(jié)合屬性：

　　display:-webkit-box;必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。

　　-webkit-box-orient必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式。

　　text-overflow:ellipsis;，可以用來(lái)多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本。

　　這個(gè)屬性只合適WebKit瀏覽器或移動(dòng)端（絕大部分是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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！