单行省略号
用法：
为已有宽度的盒子添加属性:
| 属性 | 取值 | 解释 |
|---|---|---|
| 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
解决方案：
- 会报waring
/*! autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
- 推荐
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
- 若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} }
})
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/289304.html