如果实现单行文本的溢出显示省略号同学们应该都知道用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;

效果如图:

注:

  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:; right:; 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. CSS单行、多行文本溢出显示省略号(……)

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  2. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

  3. CSS单行、多行文本溢出显示省略号(……)解决方案

    单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...

  4. css 单行和多行文本溢出显示省略号

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

  5. CSS实现单行、多行文本溢出显示省略号(…)

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

  6. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

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

  7. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  8. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  9. css多行文本溢出显示省略号(…)

    text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...

随机推荐

  1. SPOJ - AMR11E

    Arithmancy is Draco Malfoy's favorite subject, but what spoils it for him is that Hermione Granger i ...

  2. Python socket粘包解决

    socket粘包: socket 交互send时,连续处理多个send时会出现粘包,soket会把两条send作为一条send强制发送,会粘在一起. send发送会根据recv定义的数值发送一个固定的 ...

  3. BZOJ 4480 [JSOI2013] 快乐的jyy

    思路 两个字符串都插入回文自动机中(每次重置last) 最后统计两个right集合的大小就好了 代码 #include <cstdio> #include <algorithm> ...

  4. Learning-Python【16】:模块的导入使用

    一.什么是模块 模块就是一系列功能的集合体,一个模块就是一个包含了Python定义和声明的文件,文件名就是模块名字加上.py的后缀. 模块有三种来源: 1.内置的模块 2.第三方的模块 3.自定义模块 ...

  5. tomcat启动后8005端口未被占用

    8005端口是tomcat本身的端口,如果这个端口在启动时未被tomcat占用的话,就无法使用它自带的shutdown.sh脚本关闭tomcat 接下来我以tomcat-9.0.12为例说明 下载to ...

  6. poj 3304 Segments 线段与直线相交

    Segments Time Limit: 1000MS   Memory Limit: 65536K       Description Given n segments in the two dim ...

  7. Qt5OpenGL.术语01

    来自:QT 5.4+ OpenGL编程 - brain2004的专栏 - CSDN博客.html(https://blog.csdn.net/brain2004/article/details/707 ...

  8. 牛客小白月赛12 I 华华和月月逛公园 Tarjan算法求隔边

    题目链接:https://ac.nowcoder.com/acm/contest/392/I 题意:给你一个连通的无向图,问图的隔边有多少条 输入:N,M分别是点数和边数 之后M行每行两个正整数u,v ...

  9. input type="tel" 输入框显示密文

    为了在移动端实现密码输入框且调起的键盘为数字键盘,可以用-webkit-text-security:disc;text-security:disc;属性来实现. 语法: text-security: ...

  10. django中的CBV

    CBV介绍 我们在写一个django项目时,通常使用的都是FBV(function base views) 而CBV(class base views)也有它自己的应用场景,比如在写一个按照rest规 ...