当前位置： 移动技术网 > IT编程>网页制作>CSS > 文本超过2行显示省略号失效-postcss没有向下兼容

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

文本超出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没有向下兼容：
少了 -webkit-box-orient: vertical;这行代码
在.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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网