请选择 进入手机版 | 继续访问电脑版

极客蜗牛

查看: 331|回复: 1

CSS实现单行、多行文本溢出显示省略号

[复制链接]

82

主题

99

帖子

657

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
657
QQ
发表于 2017-11-5 21:33:31 | 显示全部楼层 |阅读模式
  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. <div class="blockcode"><blockquote>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. }
复制代码


回复

使用道具 举报

0

主题

6

帖子

31

积分

新手上路

Rank: 1

积分
31
发表于 2018-3-12 20:18:13 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|极客蜗牛

GMT+8, 2019-6-24 19:38 , Processed in 0.058625 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表