共计 895 个字符，预计需要花费 3 分钟才能阅读完成。
前言
今天在移动端开发的时候，遇到一个块级文本省略 ios 手机无效的问题，这种问题形成的原因是什么呢？chrome 里面是正常的，为啥 ios 里面不行？解决方案又是什么呢？
文本省略回顾
我很早很早之前的文章介绍了文本省略的方式，其中有一行和多行，请看：https://www.haorooms.com/post/css_common
文章的第十二条。
但是单行文本省略在如下结构里面，特别是在 ios 手机里面
haorooms
前端博客
haorooms 前端博客
前端工程师
外层用
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 本身也是存在一定的兼容性问题的，实际使用的时候还需要具体去取舍。
小结
本文纯属工作中遇到的问题，记录一下，积累一下，希望对你有所帮助！
正文完
