CSS文字省略顯示

Hanger發表於2018-02-24

當頁面上有過多文字的時候,往往需要省略顯示,CSS可以很方便的做到這點。

單行文字省略顯示

width: 68%; // 需要固定一個寬度
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文字省略顯示(適用於WebKit瀏覽器和移動端)

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 設定需要顯示的行數
overflow: hidden;

相關文章