css实现单行/多行文本超出显示省略号

单行文本超出显示省略号

.ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  white-space:nowrap;//文本不会换行（单行文本溢出）
  width:130px;//宽度是必须的
}

多行文本超出显示省略号（存在兼容性问题）

.mult_line_ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  display: -webkit-box;
  -webkit-line-clamp: 3;//最多几行
  -webkit-box-orient: vertical;
  width:130px;
}

问题：在某些webpack打包的项目下会出现-webkit-box-orient: vertical;样式应用不上情况

原因：该样式被autoprefixer插件过滤掉了

解决方案：

.mult_line_ellipsis{//多行文本溢出
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  display: -webkit-box;
  -webkit-line-clamp: 3;
/*autoprefixer: off*/
  -webkit-box-orient: vertical;
/*autoprefixer: on*/
  width:130px;
}