CSS过长文本省略号显示

 单行过长的文本以省略号形式显示

span{
    display: inline-block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    /* 让文字在一行内显示, 不换行 */
    white-space:nowrap;
    /* 当内容超过盒子宽度, 隐藏溢出部分 */
    overflow:hidden;
    /* 如果溢出的内容是文字, 就用省略号代替 */
    text-overflow:ellipsis;
}

 

多行过行的文本，最末以省略号形式显示（IE无效）

div{
    width: 180px;
    height: 5.5em;
    background-color: silver;
    line-height: 1.4em;
            
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; 
}

以下是多行效果