一、單行文本截字

p {
    text-overflow: ellipsis;/*顯示省略號代替裁剪的文本*/
    white-space: nowrap;/*空白處理方式 不換行*/
    overflow: hidden;/*溢出隱藏*/
}    

效果：

二、多行文本截字

p{
    display:-webkit-box;/*設置盒子為彈性盒容器*/
    -webkit-box-orient:vertical;/*設置盒子內部排列方式為垂直排列*/
    -webkit-line-clamp:2;/*顯示兩行*/
    text-overflow:ellipsis;/*用省略號代替才建的文字
 
*/
    overflow:hidden;/*溢出隱藏*/
    /*若為純字母、數字，需要加上下面這句*/
    word-break:break-all;
}

效果

css文本截字，超出文本省略號顯示