首页 > 代码库 > 多行文本溢出显示省略号(…)
多行文本溢出显示省略号(…)
(单行)省略号:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
(双行)省略号:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
注:
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp
;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;
,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
多行文本溢出显示省略号(…)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。