简单介绍一下单行超出显示省略号
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
overflow: hidden;溢出隐藏
white-space: nowrap;文字不能转行
text-overflow:ellipsis;隐藏的部分用...表示
大招来了，多行超出显示省略号
overflow: hidden;首先是溢出隐藏，不可或缺
display: -webkit-box;弹性盒模型显示
-webkit-box-orient: vertical;盒模型元素的排列方式
-webkit-line-clamp: 3;显示行数
text-overflow: ellipsis;
但是问题来了，本地运行是成功的，但是webpack编译之后，奇怪的事情的发生了，
-webkit-box-orient: vertical;这句css消失了，就这样莫名其妙的消失了。
找问题吧，
网上有两种解决方法：
1.
使用
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
替换
-webkit-box-orient: vertical;
重新编译，发现还是还是消失了，我也不太清楚别人为什么可以，反正我的不可以，
然后替换成（多了个 ! ）
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
再次编译，总算出现了，成功。
2.
optimize-css-assets-webpack-plugin这个插件的问题
注释掉webpack.prod.conf.js中下面的代码
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),虽然-webkit-box-orient: vertical;未消失，但是有一个小问题，
这个插件是做css压缩的，也就是说，你要是删除了这个插件，你的css就不会被压缩。
以上两种方法亲测可用，不过，还是没有太了解其中的原理。
不过，上面介绍的多行超出显示省略号，有兼容性问题，这个属性只适合webkit浏览器或移动端（绝大部分是webkit内核的）浏览器，比较好的方式是设置相对定位容器的高度，用包含省略号（...）的元素模拟实现：
.blog-content {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
margin-bottom: 8px;
}
.blog-content:after {
content: "...";
font-weight: 800;
position: absolute;
bottom: 0;
right: 0;
// padding:0 20px 1px 45px;
}