指定展示文字的行数超出隐藏显示省略号（-webkit-line-clamp）

一、简单介绍一下用到的css属性
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其它的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient:vertical 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

二、通过纯CSS实现指定展示文字的行数超出隐藏显示省略号

<template>
  <el-popover placement="bottom" width="450" height="40" trigger="hover" :content="msg">
	<span class="content" slot="reference">
	      {{msg}}
	</span>
</el-popover>
</template>
<script>
     export default({
         data(){
              return{
                  msg:"  沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁    郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。"
               }
           }
     })
</script>
<style>
    .content{
         display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
		overflow:hidden;
		cursor:pointer;
    }
</style>

三、使用**-webkit-line-clamp**在本地调试可以，发现打包后部署到服务器不起作用
（1）安装依赖这个依赖 npm i -S optimize-css-assets-webpack-plugin
（2）注释掉webpack.prod.conf.js中下面这段代码代码：

   new OptimizeCSSPlugin({
       cssProcessorOptions: config.build.productionSourceMap
         ? { safe: true, map: { inline: false } }
         : { safe: true }
    })

四、效果图