使用vue-cli时,使用多行超出省略问题

Posted rlflash

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue-cli时,使用多行超出省略问题相关的知识,希望对你有一定的参考价值。

 

div{

  overflow : hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

正常的多行省略,但在使用vue-cli时,-webkit-box-orient: vertical 这个属性在本地运行是存在的,但是打包后放到线上这个属性消失了;

解决办法:

div{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}









以上是关于使用vue-cli时,使用多行超出省略问题的主要内容,如果未能解决你的问题,请参考以下文章

react使用less时,多行文本换行超出省略号不生效

CSS中 设置( 单行多行 )超出显示省略号

CSS中 设置( 单行多行 )超出显示省略号

web前端入门到实战:css实现单行、多行文本超出显示省略号

HTML多行文本超出区域用省略号代替

CSS文本单行或者多行超出区域省略号(...)显示方法