文字显示省略号
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. 【JavaScript】__proto__和prototype的区别和联系【整理】

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } Chrome运行结果: 提示找不 ...

  2. 2016级算法期末模拟练习赛-F.AlvinZH的青春记忆IV

    1086 AlvinZH的青春记忆IV 思路 难题,动态规划. 这是一道很有意思的题,因为它不仅卡了时间,也卡了空间,而且卡的很妙很迷. 光是理解题意已经有点难度,简化题意:两串数字序列,相等的数字定 ...

  3. c/c++ int,float,short 大小端转换函数

    unsigned int(uint32_t)大小端转换函数 unsigned int BLEndianUint32(unsigned int value) { return ((value & ...

  4. StarUML使用简明教程

    最近了解到StarUML比较多,所以写一篇教程供大家参考,不足支持,请见谅. StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarUML是一 ...

  5. 2018沈阳网络赛 - Ka Chang KD树暴力

    题意:给你一棵树,n个点q次操作,操作1查询x子树深度为d的节点权值和,操作2查询子树x权值和 把每个点按(dfn,depth)的二维关系构造kd树,剩下的只需维护lazy标记即可 #include& ...

  6. json对象和数组

    Json数据就是格式化的字符串.c#中如果做为参数调用,类型就是string.1.Json数组 方括号[{ "firstName":"John" , " ...

  7. 查看Postgresql的连接状况

    今天遇到一个问题,就是pg一直报错,说有太多的客户端连接到数据库上面.但现在不知道是什么程序连接.pg默认的max_connection是100,我并没有修改过,以为平时公司内部用,应该够了,但现在貌 ...

  8. Mac 10.12通过Launchd创建自定义服务（基于MySQL 5.7.15的开机自启动）

    在上一篇文章http://www.cnblogs.com/EasonJim/p/6275863.html中安装MySQL时采用的时DMG包的安装步骤页面进行安装的,如果这样安装的MySQL是会开机自启 ...

  9. EasyNet开源项目计划

    EasyNet已经在github(https://github.com)开源了三个小项目: 1. patent query parser(https://github.com/easynet-cn/p ...

  10. PHP 判断字符串 是否 包含另一个字符串

    1.stristr 忽略大小写 $string = 'Hello World!'; if(stristr($string, 'earth') === FALSE) { echo '"eart ...