CSS教程

CSS 字体超出省略号

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

单行省略号

用法：

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

属性 取值 解释
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*/
  1. 推荐
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
  1. 若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 字体超出省略号的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航