2022-12-23 工作记录--CSS-超出多行显示省略号ios真机偶失效问题

news2024/11/19 3:42:50

`CSS`-超出多行显示省略号`ios`真机偶失效问题

一、前言

最近帮同事解决一个了bug：在ios真机上，超出多行显示省略号的文本内容，偶然会出现未显示问题。

最开始，我没往超出多行显示省略号样式方面进攻，还以为是react渲染机制或者网络机制问题，但我发现后端数据一直console了滴，只是页面偶然未渲染，这让我纳闷了，经过多方尝试，终于找到了突破口：文本偶然未显示的关键点竟然是加了超出多行显示省略号的样式，把这个样式注释掉就不存在上述问题了。

But

我们应运营要求，需要保留这个样式，那该如何优化处理呢？请往下看吧👇🏻

二、问题分析与解决

我是在res.less里把 超出多行省略号处理 封装成一个通用样式滴，代码如下：

res.less

/** 多行显示省略号【默认超出两行省略号】 */
.overflow-hidden(@clamp:2) {
  -webkit-box-orient: vertical; // 避免压缩后删除此行
  -webkit-line-clamp: @clamp; // 显示省略号行数
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

现在让我们来看看引用时的写法区别吧~

1、错误写法 ❌

html

/* text: 后端返的文本内容 */
<div className="text">{text}</div>

css

@import "../../res.less";
.text {
    width: 367px;
    left: 193px;
    top: 559px;
    position: absolute;
    font-size: 24px;
    text-align: center;
    color: #dfafab;
    /** 超出两行省略号处理 */
    .overflow-hidden();
}

2、正确写法 ✅

在文本内容盒子外面再套一个div盒子（如下面代码里的类名为content的盒子），在其上面加超出多行省略号处理的样式。然后在ios真机上进行测试，就发现问题解决啦~

html

<div className="content">
    /* text: 后端返的文本内容 */
    <div className="text">{text}</div>
</div>

css

@import "../../res.less";
.content {
    width: 367px;
    left: 193px;
    top: 559px;
    position: absolute;
    /** 超出两行省略号处理 */
    .overflow-hidden();
    .text {
      font-size: 24px;
      text-align: center;
      color: #dfafab;
    }
}