专栏首页山河木马CSS控制文字,超出部分显示省略号

CSS控制文字,超出部分显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:

适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

效果如图:

适用范围: 该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

CSS设置一行文字,超出部分自动隐藏

1 2 3 4 5 6 7 8 9

.textone {         overflow: hidden;         text-overflow: ellipsis;         display: -webkit-box;         line-height: 25px;             max-height: 25px;         -webkit-line-clamp: 1;         -webkit-box-orient: vertical;     }

 将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了;设置超过两行自动隐藏是效果,line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了:代码和效果图如下:

1 2 3 4 5 6 7 8 9

.textTow {         overflow: hidden;         text-overflow: ellipsis;         display: -webkit-box;         line-height: 23px;         max-height: 46px;         -webkit-line-clamp: 2;         -webkit-box-orient: vertical;     }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3自定义滚动条样式 -webkit-scrollbar

    webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是...

    山河木马
  • 使用JavaScript判断手机是处于横屏还是竖屏(转)

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。 从而根据实际需求而执行相应的程序。通...

    山河木马
  • 去除chrome浏览器自动添加的默认样式(转)

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autof...

    山河木马
  • NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景

    本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Redis、Memcache、MongoDB特点、区别以及应用场景。 ? Nosql介绍...

    码神联盟
  • 技术分享 | mongodb和redis和memcache你怎么选?

    不同的Nosql,其实应用的场景各有不同,所以我们应该先了解不同Nosql之间的差别,然后分析什么才是最适合我使用的Nosql。 Nosql介绍 Nosql的全...

    加米谷大数据
  • NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景

    本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Redis、Memcache、MongoDB特点、区别以及应用场景。

    码神联盟
  • NoSql非关系型数据库

    参考blog:http://blog.csdn.net/u012377333/article/details/50598519

    匠心Java
  • 教你如何读webpack2中文文档

    经过一个多月的奋战,webpack2的中文文档已经翻译好大部份,并且完成了核心内容“概念”和“指南”部份的校对。 这份文档比react, vue之类的文档都要庞...

    李成熙heyli
  • 创建Oracle数据库

    打开开始->程序,找到oracle的配置和移置工具,打开Database Configuration Assistance

    用户1208223
  • 开发人员去哪儿工作强?硅谷公司机构薪资福利大盘点

    原作者 Roger Jin 编译 CDA 编译团队 本文为  CDA 数据分析师原创作品,转载需授权 开发人员应该选择在哪儿工作? 如今,美国 35% 的劳动力...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券