CSS实现单行/多行文本溢出部分省略（...）显示

1、单行文本就很简单了，大家应该都知道：

代码如下：

<div class="text-over">
    氛围是他个人会有人推荐用他人看天空娱乐户人家软件园如瑞今天一天射日访问与太热亢个如
</div>

<style>
    .text-over {
        width: 258px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

效果：

2、多行文本省略大家应该也在网上看到很多，最多的是这样：

<div class="text-over">
    氛围是他个人会有人推荐用他人看天空娱乐户人家软件园如瑞今天一天射日访问与太热亢个如
</div>

<style>
    .text-over {
        width: 258px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

但实际上效果是这样的，并没有起到作用：

因此有很多人说用js来配合解决，手动添加<span>...<span>标签，添加::after什么的。我觉得太麻烦不想写。终于，在我的不懈努力下，找到了解决办法：

<div class="text-over">
    氛围是他个人会有人推荐用他人看天空娱乐户人家软件园如瑞今天一天射日访问与太热亢个如
</div>

<style>
    .text-over {
        width: 258px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        /*autoprefixer: off */ 
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }
</style>

问题解决了，注释里的代码不容小视。webpack打包后-webkit-box-orient会被移除，autoprefixer会自动移除老式过时的代码，所以需要添加注释关闭autoprefixer,但是如果有清除注释的插件,请将该插件设为false,否则不生效。