css实现文字超出隐藏并显示省略号

单行实现文本溢出显示省略号：

span{
    white-space: nowrap;      /*超出的空白区域不换行*/
    overflow: hidden;         /*超出隐藏*/
    text-overflow: ellipsis;  /*文本超出显示省略号*/
}

双行实现文本溢出显示省略号：

span{
    display: -webkit-box;             /*将对象转为弹性盒模型展示*/
    -webkit-box-orient: vertical;     /*设置弹性盒模型子元素的排列方式*/
    -webkit-line-clamp: 2;            /*限制文本行数*/
    overflow: hidden;                 /*超出隐藏*/
}

多行实现文本溢出显示省略号：

span{
    position: relative;
    line-height: 1.4em;        /*行高和height成倍数，这里以三行文本超出隐藏举例*/
    height: 4.2em;
    overflow: hidden;
}
span::after{         /*若要兼容IE8需用:after*/
    content: "...";          /*替换内容比较灵活*/
    position: absolute;
    bottom: 2px;
    right:5px;
    padding: 0 3px;
    background:#fff;         /*颜色和文字背景保持一致*/
    box-shadow: 0 0 10px #fff;  /*边缘处理*/
}