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;  /*边缘处理*/
    }