YULIN Web前端 无标签 2019年11月29日 10:29:00 5000 css 实现div内显示两行或三行,超出部分用省略号显示 ## div内显示一行,超出部分用省略号显示 ## white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ## div内显示两行或三行,超出部分用省略号显示 ## overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;(行数) -webkit-box-orient: vertical; - 注意!容器需要有固定的高度本方法才有效。 ## 概述 ## -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。 ## 支持范围 ## ![请输入图片描述][1] [1]: http://qny.tuchuang.mqllin.cn/FnctE5TZXFlEwUnSbfZ8ll_WSdiF 分享到QQ好友 Last iview upload组件上传图片到七牛云 Next 10分钟利用七牛云存储快速搭建个人免费图床 仅有一条评论 irrarycle · 09月 buy priligy paypal Each morning health department workers and volunteers gathered at the Ministry of Health building where the ground floor was converted to an emergency operations supply center 回复
irrarycle · 09月
buy priligy paypal Each morning health department workers and volunteers gathered at the Ministry of Health building where the ground floor was converted to an emergency operations supply center