• 售前

  • 售后

热门帖子
入门百科

css3溢出隐蔽的方法

[复制链接]
刘久田 显示全部楼层 发表于 2022-1-6 20:11:45 |阅读模式 打印 上一主题 下一主题
如果实现单行文本的溢出显示省略号同砚们应该都知道用text-overflow:ellipsis属性来,固然还需要加宽度width属来兼容部门浏览。
实现方法:
  1. overflow: hidden;
  2. text-overflow:ellipsis;
  3. white-space: nowrap;
复制代码
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
实现方法:
  1. display: -webkit-box;
  2. -webkit-box-orient: vertical;
  3. -webkit-line-clamp: 3;
  4. overflow: hidden;
复制代码
适用范围:
因利用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
       
  • -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见团结属性:   
  • display: -webkit-box; 必须团结的属性 ,将对象作为弹性伸缩盒子模子显示 。   
  • -webkit-box-orient 必须团结的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
实现方法:
  1. p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
  2. p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
  3. background: -webkit-linear-gradient(left, transparent, #fff 55%);
  4. background: -o-linear-gradient(right, transparent, #fff 55%);
  5. background: -moz-linear-gradient(right, transparent, #fff 55%);
  6. background: linear-gradient(to right, transparent, #fff 55%);
  7. }
复制代码
适用范围:
该方法适用范围广,但文字未超出行的环境下也会出现省略号,可团结js优化该方法。
注:
       
  • 将height设置为line-height的整数倍,防止超出的文字露出。   
  • 给p::after添加渐变配景可避免文字只显示一半。   
  • 由于ie6-7不显示content内容,以是要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after更换成:after。
以上所述是小编给各人介绍的css3溢出埋伏的方法,渴望对各人有所资助。在此也非常感谢各人对草根技术分享网站的支持!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作