单行文本溢出和多行文本溢出时，隐藏多余文字，用省略号代替

好记性不如烂笔头，又遇见了还是没想起来，还是记下吧。说不定还能用到。

单行文本溢出

假如一个盒子 width: 100px;而其中的文字过多，超出了盒子宽度，如图。则需要隐藏多余文字。

我们想要的如图所示的效果

但现在在设置了盒子宽度 width: 100px;显示的是这样。此时只需添加一些css样式即可。

需要给盒子添加的样式为：

.test1 {
        width: 100px;
        display: block;
         /* 超出宽度部分不换行*/
        white-space: nowrap;
        /* 超出隐藏*/       
        overflow: hidden;
        /*使用省略号代替*/
        text-overflow: ellipsis;

    }

多行文本溢出

对于多行文本，我们需要的是这样的

然而它现在是这样的

这是也只只需要给盒子添加一些css即可，需要注意的是不要给盒子设置高度。

.test2 {
        width: 100px;
        /*使用省略号代替*/
        text-overflow: ellipsis;
         /* 超出隐藏*/  
        overflow: hidden;
        display: -webkit-box;
        /*对齐模式，纵向对齐*/
        -webkit-box-orient: vertical;
        /*行数*/
        -webkit-line-clamp: 3;
    }