一下內容只是我工做中用過的,我又容易忘記,因此寫在這裏,記憶一下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