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

9004次浏览

前言

今天在移动端开发的时候,遇到一个块级文本省略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 本身也是存在一定的兼容性问题的,实际使用的时候还需要具体去取舍。

小结

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

Tags: css省略ios不支持

相关文章: