1. 程式人生 > >html div內第二行文字顯示不下的時候才用省略號代替 css實現

html div內第二行文字顯示不下的時候才用省略號代替 css實現

IE 代碼 塊元素 實現 bubuko flow html web hidden

有時候文字太多,但為了美觀想要在第二行的時候才顯示省略號,而不是第一行超出馬上就出現省略號

下面是css代碼:

overflow:hidden;
text-overflow: ellipsis;//顯示省略號
display:-webkit-box;
-webkit-line-clamp:2;//塊元素顯示的文本行數
-webkit-box-orient:vertical;

截圖:

技術分享圖片

定義在div上就可以了

上效果圖

技術分享圖片

這樣文字不會到第三行

html div內第二行文字顯示不下的時候才用省略號代替 css實現