CSS整块文本溢出省略,ios手机不支持解决方案

前言

今天在移动端开发的时候，遇到一个块级文本省略ios手机无效的问题，这种问题形成的原因是什么呢？chrome里面是正常的，为啥ios里面不行？解决方案又是什么呢？

文本省略回顾

我很早很早之前的文章介绍了文本省略的方式，其中有一行和多行，请看：https://www.haorooms.com/post/css_common

文章的第十二条。

但是单行文本省略在如下结构里面，特别是在ios手机里面

 <p class="haorooms__desc">
        <span>haorooms</span>
        <span>前端博客</span>
        <span>haorooms前端博客</span>
        <span>前端工程师</span>
    </p>

外层用

display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

内层用

 display: inline-block; 

是无效的。仅仅是文本超出隐藏，并没有省略号。

备注：假如你用

 display: inline; 

更无效，因为浏览器是块级省略的。

将 display: inline 改为 display: inline-block 实现整块省略

解决方案

iOS 不支持整块超长溢出打点省略如何解决呢？

我尝试了用多行的方式，仅仅展示单行，是可以的。

.haorooms__desc {
    width: 200px;
    white-space: normal;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.haorooms__desc span {
    display: inline-block;
}

这样，在 iOS/Safari 下也能完美实现整块的超长打点省略：

值得注意的是，在使用 -webkit-line-clamp 的方案的时候，一定要配合 white-space: normal 允许换行，而不是不换行。这一点，非常重要。

这样，我们就实现了全兼容的整块的超长打点省略了。

当然， -webkit-line-clamp 本身也是存在一定的兼容性问题的，实际使用的时候还需要具体去取舍。

小结

本文纯属工作中遇到的问题，记录一下，积累一下，希望对你有所帮助！