首页 > 代码库 > 移动端页面实现多行文本溢出显示省略号...
移动端页面实现多行文本溢出显示省略号...
手机浏览器种类:
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; 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。
移动端页面实现多行文本溢出显示省略号...
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。