溢出文本显示三个点

有时候会有溢出文本省略，然后显示三个点的要求。

 

需要注意：

　　1、一定要给容器设置 宽度。

　　2、容器不能是flex布局，需要改为 block 或者 inline-block。

单行文本时，只需要给元素设置下面属性(需要先设置容器宽度)：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本显示时：

overflow: hidden;
text-overflow: ellipsis;
/* 仅仅使用于 webkit内核 */
display: -webkit-box;
-webkit-line-clamp:2; /* 要显示的行数 */
-webkit-box-orient:vertical;

 

或者利用元素模拟：

    .box3{
        display: inline-block;
        height: 40px;
        width: 800px;
        line-height: 20px;
        overflow: hidden;
        position: relative;
    }
    .box3 .span{
        margin-left: 20px;
        position: absolute;
        right: 0;
        bottom: 0;
    }

或者利用一张图片模拟，利用绝对定位定位到右下角。