[CSS LEARN] 多行省略

蘇水軒發表於2019-02-20
CSS

在以前的專案（大屏視覺化看板）中的翻轉卡片裡有多行文字超出省略的場景，當時的解決方案是：

    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;    overflow: hidden;複製程式碼

但是壞處是不能自動多行需要設定line-clamp的數值，並且line-clamp有三宗罪：

■  和text-align:justify一起用會使省略號和文字相疊

■  超出截斷後會截掉部分行高

■  省略號可能出現在單詞中間


所以今天學習了定製多行省略的程式碼

利用右浮動。。

具體為from定製多行省略黑科技


相關文章