css实现第二行超出显示省略号
需求:
实现单行文本超出省略:
width: 295px;//设置宽度white-space: nowrap;//不要换行overflow: hidden;text-overflow: ellipsis;//文本超出省略
实现多行文本超出省略:
width: 295px;//设置宽度overflow: hidden;text-overflow: ellipsis;//文本超出省略display: -webkit-box;-webkit-line-clamp: 2;//第几行省略就设置第几行-webkit-box-orient: vertical;
问题:
在加上-webkit-box-orient: vertical属性编译之后
第二行并没有超出省略,
经排查后, 发现在浏览器中并没有查看到该属性
手动添加该属性之后, 功能就实现了
原因:
在开发该项目的时候,webpack配置中使用了autoprefixer插件;
该插件会在打包的时候默认加上厂商前缀,会把这个属性给冲掉
解决:
width: 295px;//设置宽度overflow: hidden;text-overflow: ellipsis;//文本超出省略display: -webkit-box;-webkit-line-clamp: 2;//第几行省略就设置第几行//提示打包的时候这里不做处理/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */
