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. C# abstract,virtual 修饰符

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

  2. 在控制台中操作MYSQL数据库步骤以及一些小问题

    一直用Navicat来对MySQL数据库进行操作,今天突然想试试用DOS控制台来操作,特记录自己第一次使用经历,若有错误之处,还望大佬们指点. 首先打开控制台,win+R键,输入cmd,确定 输入my ...

  3. 常用的JavaScript设计模式(二)Factory(工厂)模式

    Factory通过提供一个通用的接口来创建对象,同时,我们还可以指定我们想要创建的对象实例的类型. 假设现在有一个汽车工厂VehicleFactory,支持创建Car和Truck类型的对象实例,现在需 ...

  4. PHP实现长网址与短网址

    原文地址:http://www.qqdeveloper.com/detail/29/1.html 什么是长链接.短链接 顾名思义,长链接就是一个很长的链接:短链接就是一个很短的链接.长链接可以生成短链 ...

  5. Spark_安装配置_运行模式

    一.Spark支持的安装模式: 1.伪分布式(一台机器即可) 2.全分布式(至少需要3台机器) 二.Spark的安装配置 1.准备工作 安装Linux和JDK1.8 配置Linux:关闭防火墙.主机名 ...

  6. python remove跟pop的区别

    remove根据值来删除 li=[1,2,3,4] li.pop[0] li.remove['] 或者是a=li[-1]li.remove(a) pop是根据索引来删除

  7. 决策树&随机森林

    参考链接: https://www.bilibili.com/video/av26086646/?p=8 <统计学习方法> 一.决策树算法: 1.训练阶段(决策树学习),也就是说:怎么样构 ...

  8. java并发(1)

    hashmap效率高单线程不安全,hashTable效率低但线程安全 因为hashTable使用synchronized来保证线程安全,所以效率十分低,比如线程1使用put插入数据时,线程2既不能使用 ...

  9. go基础语法-条件语句

    1.if else 语句 if语句后面的条件不需要括号 if n > 0 { return 1 }else { return -1 } 'if'之后,条件判断之前,可以初始化变量(作用域为整个i ...

  10. (数据科学学习手札37)ggplot2基本绘图语法介绍

    一.简介 ggplot2是R语言中四大著名绘图框架之一,且因为其极高的参数设置自由度和图像的美学感,即使其绘图速度不是很快,但丝毫不影响其成为R中最受欢迎的绘图框架:ggplot2的作者是现任Rstu ...