单行省略号

用法：

为已有宽度的盒子添加属性:

属性	取值	解释
white-space	nowrap	让文字在一行内显示, 不换行
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替

如图

多行省略号

多行省略号只能支持 webkit 内核浏览器, IE系就不兼容，像京东这种大型互联网电商网站，他们也是用了这种做法，IE系浏览器 京东选择了放弃兼容, 只是显示固定行数, 并没有以省略号结尾。

用法：

为已有宽度的盒子添加属性:

属性	取值	解释
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
-webkit-line-clamp	数字	控制可以显示的行数
display-webkit-box	-webkit-box	将对象作为弹性伸缩盒子模型显示
-webkit-box-orient	vertical	从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

注意点： webpack编译会干掉 -webkit-box-orient: vertical

解决方案：

1. 会报waring

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

2. 推荐

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

3. 若1.2 都不行 注意在webpack.prod.conf.js中自行配置autoprefixer: {remove: false}

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

标签：box,autoprefixer,省略号,字体,webkit,盒子,overflow,CSS
来源： https://www.cnblogs.com/depressiom/p/16691570.html