本文主要是介绍CSS 字体超出省略号，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

单行省略号

用法：

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

如图

多行省略号

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

用法：

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

注意点： 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} }
})

这篇关于CSS 字体超出省略号的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！