css怎么實現單行、多行文本超出顯示省略效果

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

　　.ellipsis-line{

　　border:1pxsolid#f70505;

　　padding:8px;

　　width:400px;

　　overflow:hidden;

　　text-overflow:ellipsis;//文本溢出顯示省略號

　　white-space:nowrap;//文本不會換行

　　}

　　語法：

　　text-overflow:clip/ellipsis;

　　默認值：clip

　　適用于：所有元素

　　clip：當對象內文本溢出時不顯示省略標記（…），而是將溢出的部分裁切掉。

　　ellipsis：當對象內文本溢出時顯示省略標記（…）。

　　在使用的時候，有時候發現不會出現省略標記效果，經過測試發現，使用ellipsis的時候，必須配合overflow:hidden;white-space:nowrap;width:具體值；這三個樣式共同使用才會有效果。

　　多行文本省略

　　直接用css屬性-webkit-line-clamp：n;設置

　　在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，可以直接使用WebKit的CSS擴展屬性（WebKit是私有屬性）-webkit-line-clamp；注意：這是一個不規范的屬性（unsupportedWebKitproperty），它沒有出現在CSS規范草案中。

　　-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：

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

　　-webkit-box-orient必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。

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

　　這個屬性只合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器

　　.multi-line{

　　border:1pxsolid#f70505;

　　width:400px;

　　overflow:hidden;

　　text-overflow:ellipsis;

　　display:-webkit-box;

　　-webkit-line-clamp:3;

　　-webkit-box-orient:vertical;

　　}

以上是“css怎么實現單行、多行文本超出顯示省略效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！