2

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

 1 year ago
source link: https://www.haorooms.com/post/css_elipsis_ios
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK