关注小程序 找一找教程网-随时随地学编程

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} }
})