Vue项目关于省略号显示

省略号显示

{
	overflow: hidden;  // 超出的文本隐藏
	text-overflow: ellipsis; // 溢出用省略号显示
	white-space: nowrap; // 溢出不换行
	display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
	-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
	-webkit-box-orient: vertical;  // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
}

注意点： webpack编译会干掉 -webkit-box-orient: vertical
解决方案：
a计划（会报waring）：

/*! autoprefixer: off*/
 -webkit-box-orient: vertical; 
/* autoprefixer: on*/  

b计划（推荐）：

/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;

补充：如a计划与b计划仍无法解决问题，则注意在webpack.prod.conf.js中自行配置autoprefixer: {remove: false}

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