css樣式問題

一下內容只是我工做中用過的,我又容易忘記,因此寫在這裏,記憶一下css

三者必須結合才能夠實現溢出文本實現省略效果

overflow: hidden;       /*溢出內容隱藏*/
    text-overflow: ellipsis;  /*溢出出現省略標記*/
    white-space: nowrap;   /*強制文本在一行顯示*/

多行顯示時,最後一行超出的部分隱藏並顯示省略號

網上不少的解決方法是針對一行超出部分,隱藏並顯示省略號的,代碼以下:web

overflow:hidden;
white-space:norwrap;
text-overflow:hidden;

針對webkit瀏覽器,多行顯示時能夠經過如下css代碼實現,但對於非webkit瀏覽器,這種寫法沒有效了。瀏覽器

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

-webkit-line-clamp 是一個 不規範的屬性(unsupported WebKit property),它沒有出如今 CSS 規範草案中。spa

限制在一個塊元素顯示的文本的行數。 爲了實現該效果,它須要組合其餘外來的WebKit屬性。常見結合屬性:code

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

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

text-overflow,能夠用來多行文本的狀況下,用省略號「...」隱藏超出範圍的文本 。it

相關文章
相關標籤/搜索