CSS 省略号样式(小知识)

单行省略号：

.ellipsis{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
}

多行省略号：

.ellipsis_paragraph{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

值得注意的是，在webpack打包时，-webkit-box-orient: vertical;这行被移除了！！

出现这种情况的原因是，autoprefixer会移除老式过时的代码。

我们可以通过以下方式来解决，添加注释关闭autoprefixer，让注释行在编译时不可去掉。

具体代码如下：

.ellipsis_paragraph{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}