收藏
回答

css中background-clip 和 文字省略配合一块使用实现文字渐变,会导致省略号没有展示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug <view> 或者 text组件 微信iOS客户端 8.0.20 2.24.0
  .series-des {
        margin-top: 20rpx;
        padding: 0 20rpx;
        font-weight: 500;
        font-size: 40rpx;
        line-height: 48rpx;
        background: linear-gradient(to right, rgba(255, 232, 198, 1), rgba(255, 182, 73, 1));
        background-clip: text;
        -webkit-background-clip: text; /* stylelint-disable-line*/
        color: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

使用如上css代码,当文字超长需要展示省略号时, IOS真机上,省略号会不见了。 但是在安卓机上正常。

IOS真机展示: 安卓机上展示效果

最后一次编辑于  2022-04-22
回答关注问题邀请回答
收藏

2 个回答

  • Y
    Y
    2023-01-12

    这个怎么解决的呢,老哥求解决方式


    2023-01-12
    有用
    回复
  • 武曲心
    武曲心
    2022-04-22

    应该是判定范围不一样吧,ios应该把省略号认为非有效区域给裁切了

    2022-04-22
    有用
    回复 3
    • 夏天
      夏天
      2022-04-27
      那这种岂不是不能用css来实现文字的省略? 需要用js来进行文字超长后的省略?从而保证都是文本形式的内容?
      2022-04-27
      回复
    • 武曲心
      武曲心
      2022-04-27回复夏天
      可以试下这个
      2022-04-27
      回复
    • Y
      Y
      2023-01-12回复夏天
      老哥这个是怎么解决的呢 我用了 武曲心这个,不行呢
      2023-01-12
      回复
登录 后发表内容