iOS 手机上前端开发页面文本省略溢出问题如何解决？

Question

前端开发的页面在部分 iOS 手机上出现了下面的情况，文本省略溢出问题

我分析原因可能是由于不同系统包含的字体的行高不一致，即使设置了height = line-height 一样会有以上问题。但是不知道该如何解决。求助

Answer 1

我尝试了一下，在height = line-height = font-szie的情况下，加上padding-top: 1px可以解决这个问题，即在需要使用单行省略的地方加上，如下方代码

.demo {
    height: 28px;
    line-height: 28px;
    font-size: 28px;
    padding-top: 1px;
}

这样使用，如：

<div class="text-overflow demo">我是需要进行单行省略的文案</div>

Answer 2

可以用js计算总宽度,然后计算最多可以显示多少文字，做截断处理。

Answer 3

如果css不行，可以考虑用js来实现看看？动态计算并设置元素的高度和行高。通过获取元素的 scrollHeight 和 offsetHeight，可以动态地调整 line-height。

<div class="test-ellipsis">我是一段文字啊测试一下数据</div>

function adjustLineHeight() {
  const element = document.querySelector('.ellipsis');
  const lineHeight = element.scrollHeight / element.clientHeight;
  element.style.lineHeight = lineHeight + 'px';
}

Answer 4

这样的情况呢要给文字单独套一层span，然后设置让span不换行或者限制几行。和什么型号的手机是没有关系的。

      <div style="width:80px">
        <span
          style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical;
            white-space: normal;
            word-break: break-word;
            word-wrap: break-word;
          "
        >
        两行就省略esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
        </span>
      </div>

让外层的div被span撑开就不会出现这样的情况了，而不是限制外层的高度。