文本超过2行显示省略号失效-postcss没有向下兼容

文本超出2行部分显示省略号，代码如下：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

发现代码失效，还是超出，百度尝试了一些方法：

1.给这块内容加宽度；
2.设置位置，使其不会脱离文档流；
3.加上white-space:pre-line;（合并空白符序列，但是保留换行符）
4.给代码加这两行注释

.xxx{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*2表示只显示2行*/
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

后来排查发现有一行代码一直不显示，配置问题，postcss没有向下兼容：

在.postcssrc.js文件内添加以下代码，就解决了：

"autoprefixer": {
      "browsers": [
      "> 1%",
      "last 10 ios versions",
      "last 10 android versions",
      "last 10 ChromeAndroid versions",
      "last 10 Chrome versions",
      "last 10 Safari versions",
      "last 10 Samsung versions",
      "last 10 UCAndroid versions",
      "last 10 versions",
      "not ie <= 8"
    ]
  }

我的方法不一定适合你，可以先大概估计下问题原因，多尝试~

本文地址：https://blog.csdn.net/weixin_48286936/article/details/107393054