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

css代码:

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

但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。

WebKit浏览器或移动端的页面

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

css多行文本溢出显示省略号(…)的更多相关文章

  1. css多行文本溢出显示省略号

    HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  2. css多行文本溢出显示省略号(兼容ie)

    在日常编写页面中,我们经常遇到内容行数过多时,需要出现 “...” 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-box; -webkit ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. HDU 2080(三角函数)

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2080 夹角有多大II Time Limit: 1000/1000 MS (Java/Others)    ...

  2. Visual Studio 中常用的快捷键

    项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示 Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添 ...

  3. C# abstract,virtual 修饰符

    abstract(抽象):该abstract修饰符指示要修改的东西有缺失或不完整的实现.abstract修饰符可以与类,方法,属性,索引器和事件一起使用.abstract在类声明中使用修饰符来指示类仅 ...

  4. Python 学习笔记(九)Python元组和字典(一)

    Python 元组 元组的定义  元组(tuple)是一种Python对象类型,元组也是一种序列 Python中的元组与列表类似,不同之处元组的元素不能修改 元组使用小括号,列表使用方括号 元组的创建 ...

  5. Oracle的分析函数

    Oracle的分析函数row_number(),rank(),dense_rank()的用法与区别 比如查询工资排名第7的员工信息,可以用分析函数来做. --查询工资排名第7的员工信息select * ...

  6. 不用注解,获取spring容器里的bean(ApplicaitonContext)

    以静态变量保存Spring ApplicationContext, 可在任何代码任何地方任何时候取出ApplicaitonContext. 使用方法:SpringContextHolder.getBe ...

  7. E. K Balanced Teams

    类比背包问题,为每个学生附加一个权重$pos[i]$,意思是选择该学生后,之后可以选择$p[i]~p[i]+5$的学生. 转换公式: $$d[i][j]=max(d[i+1][q],d[i+pos][ ...

  8. hdu_5187_zhx's contest

    Problem Description As one of the most powerful brushes, zhx is required to give his juniors n probl ...

  9. 在JSP中使用formatNumber控制要显示的小数位数

    先引入标签库 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 比 ...

  10. layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理

    解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...