移动端页面实现多行文本溢出显示省略号...

Posted 2020-09-28 张粤圳

手机浏览器种类：

UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于android修改的

 

由于移动端（绝大多数都是基于WebKit内核的浏览器），所以可以直接使用WebKit的CSS扩展属性 -webkit-line-clamp （是WebKit私有属性）；注意：（这个属性没有出现在css规范草案中，不过在WebKit内核中可以正常使用）。

 

CSS代码如下：

1 overflow : hidden;
2 text-overflow: ellipsis;
3 display: -webkit-box;
4 -webkit-line-clamp: 2;
5 -webkit-box-orient: vertical;

1.  overflow:hidden;  设置了这个属性，text-overflow属性才会生效。

2.  text-overflow: ellipsis;  用来在多行文本的情况下，用省略号"..."隐藏超出范围的文本内容。

3.  display: -webkit-box;  必须结合的属性，将对象作为弹性伸缩盒子模型显示。

4.  -webkit-line-clamp: 2;  用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

5.  -webkit-box-orient: vertical;  必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。