css實現多行文字溢位顯示省略號

2022-06-15 07:18:12 字數 678 閱讀 6169

webkit瀏覽器或移動端的頁面

在webkit瀏覽器或移動端(絕大部分是webkit核心的瀏覽器)的頁面實現比較簡單,可以直接使用webkit的css擴充套件屬性(webkit是私有屬性)-webkit-line-clamp ;注意:這是乙個 不規範的屬性(unsupported webkit property),它沒有出現在 css 規範草案中。

-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果,它需要組合其他的webkit屬性。

常見結合屬性:

**如下

複製**

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

-webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。

text-overflow: ellipsis;,可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字 。

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

這個屬性比較合適webkit瀏覽器或移動端(絕大部分是webkit核心的)瀏覽器。

CSS實現多行文字溢位顯示省略號

單行文字溢位顯示省略號,可以直接使用 text overflow ellipsis white space nowrap 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 多行文字溢位顯示省略號 方案一 使用webkit屬性 webkit line clamp 注意這是乙個不規範的屬性 哈哈哈哈哈哈...

css多行文字溢位顯示省略號

overflow hidden text overflow ellipsis white space nowrap 移動端頁面 overflow hidden text overflow ellipsis display webkit box 必須結合的屬性 將物件作為彈性伸縮盒子模型顯示 webk...

CSS實現單行 多行文字溢位顯示省略號( )

如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 效果如圖 但是這個屬性只支援...