文字显示省略号
width: 4.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

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

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

css文本内容显示省略号的更多相关文章

  1. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  2. css控制文本内容显示省略号

    1,单行文字显示省略号 div{ width:200px; overflow:hideen; white-space:nowrap; text-overflow:ellipsis; } 2,多行文字显 ...

  3. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  5. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  6. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  7. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  8. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  9. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

随机推荐

  1. python基础知识梳理-----4基本数据类型,list ,tuple 操作 ,增删该查，以及其他功能函数

    一:列表的增加 1: append() lis = ['张三','李四','王二码子','李鹏智障'] lis.append('赵武')      # 这种加法是放在最后 print(lis) 输出  ...

  2. Linux磁盘分区、挂在

    分区基础知识分区的方式:1) mbr分区:1.最多支持四个主分区2.系统只能安装在主分区3.扩展分区要占一个主分区4.MBR最大只支持2TB,但拥有最好的兼容性2) gtp分区:1.支持无限多个主分区 ...

  3. eclipse首次使用的基本设置

    最近,一些刚开始学习Java的朋友使用eclipse遇到了一些编码导致的问题向我询问,那就总结一下首次安装eclipse后我们大体应该设置哪些基本东西吧~大神们呐就不用看啦. 一.修改工作空间默认编码 ...

  4. 关于nginx的一个错误操作记录

    今天在弄前后端同步的测试的时候,前端用Nginx代理访问后端接口,由于启动了多次nginx软件,没有将前几次启动的nginx进程关闭,导致在访问后端接口的request被挂起,过了半天也没有结果返回, ...

  5. SQL语句01

    SQL(Structured Query Language):结构化查询语言 SQL分类:    数据操纵语言DML(Data Manipulation Language)        SELECT ...

  6. 【实战】JBOSS反序列化Getshell

    一.JBOSS4.0.5_GA,5.x,6.x 需要JavaDeserH2HC(https://github.com/joaomatosf/JavaDeserH2HC) 操作起来 javac -cp ...

  7. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  8. mysql 非安装版的配置

    一直以来都是使用wamp中集成的mysql数据库,今天突然想试试下载一个mysql的zip包进行配置. 一.下载mysql非安装版 下载地址可以到:http://dev.mysql.com/downl ...

  9. Java 8学习之Lambda表达式

    一.lambda表达式 一个lambda表达式包含三个部分: 一段代码 参数 自由变量的值,这里的自由指的是哪些不是参数并且没有在代码中定义的变量. 示例: public static void re ...

  10. ELK系列~Fluentd对大日志的处理过程~16K

    Fluentd是一个日志收集工具,有输入端和输出端的概念,前者主要是日志的来源,你可以走多种来源方式,http,forward,tcp都可以,后者输出端主要指把日志进行持久化的过程,你可以直接把它持久 ...