css - 省略號效果

單行文本省略號

white-space: nowrap;     /*強制不換行*/
overflow: hidden;        /*超出部分隱藏*/
text-overflow: ellipsis; /*超出部分顯示省略號*/

多行文本省略號(webkit瀏覽器和移動端適用)

display: -webkit-box;
-webkit-box-orient: vertical; /*子元素排列方式-豎排*/
-webkit-line-clamp: 3;        /*非標準屬性 webkit擴展屬性 限定只顯示3行,多出部分隱藏並顯示省略號*/
overflow: hidden;             /*超出部分隱藏*/

以上!