css文本截字,超出文本省略号显示

一、单行文本截字

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;
}

效果

posted @ 2018-05-07 23:57  筱小鹏仔  阅读(386)  评论(0编辑  收藏  举报