本文引自：https://www.cnblogs.com/wyaocn/p/5830364.html

首先，要知道css的三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

这三个是css的基础属性，需要记得。

但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？

css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

最后的css样式如下：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

转载自：http://blog.csdn.net/bing0728004/article/details/51509435

-----------------------------------一下代码还未验证真伪-------------------------------------------

如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。

可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。

JS的demo如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5.  
  6. <title>Examples</title>
  7. <style type="text/css">
  8. .demo{width:100px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
  13. <script>
  14. // js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
  15. // 直接用id获取domo对象
  16. var oBox=document.getElementById('demo');
  17. // slice() 方法可从已有的数组中返回选定的元素。
  18. // 您可使用负值从数组的尾部选取元素。
  19. // 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
  20. // 此处需要根据需求自行修改slice()的值，以达到要显示的内容
  21. var demoHtml = oBox.innerHTML.slice(0,10)+'...';
  22. // 填充至指定位置
  23. oBox.innerHTML = demoHtml;
  24. </script>
  25. </body>
  26. </html>

转载 | CSS实现单行、多行文本溢出显示省略号（…）的更多相关文章

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

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  2. CSS实现单行、多行文本溢出显示省略号（…）

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

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

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

  4. CSS单行、多行文本溢出显示省略号（……）

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

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

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

  6. CSS单行、多行文本溢出显示省略号（……）解决方案

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

  7. 《CSS实现单行、多行文本溢出显示省略号》

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

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

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

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

    一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...

  10. css自动省略号...，通过css实现单行、多行文本溢出显示省略号

    网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...

随机推荐

  1. mysql 终端命令

    1.打开数据库 /usr/local/MySQL/bin/mysql -u root -p 2.输入root密码 3.使用我的数据库 use mysql 4.查看表 desc table_name 5 ...

  2. ABP开发框架前后端开发系列---（15）ABP框架的服务端和客户端缓存的使用

    缓存在一个大型一点的系统里面是必然会涉及到的,合理的使用缓存能够给我们的系统带来更高的响应速度.由于数据提供服务涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发 ...

  3. InstallShield 2018 打包安装

    关于InstallShield 2018打包安装程序的使用 1. 下载InstallShield2018 建议使用新的版本,毕竟新的版本功能功能全.问题少.用户体验佳. 下载地址:http://www ...

  4. Modbus RTU新版本指令介绍

    Modbus RTU新版本指令介绍 TIA V13 SP1版本软件中提供了2个版本的Modbus RTU指令: 图1. 两个版本Modbus RTU指令 早期版本的Modbus RTU指令(图1. 中 ...

  5. springboot2.0.4对接redis3.2.12版本哨兵模式

    redis 哨兵模式的创建 1. 下载redis3.2.12版本.https://codeload.github.com/antirez/redis/zip/3.2.12 2.  解压后放到/usr/ ...

  6. C# 使用XDocument实现读取、添加，修改XML文件

    新建xml文件编写如下内容做测试使用 需要引用:System.Xml.Linq 命名空间 一.读取XML 读取所有文档  筛选子元素为attribute1的元素,结果是IEumerable 通过Lin ...

  7. 网络框架,互联网的组成,OSI七层协议,抽象层

    6.25自我总结 1.网络框架 1.单机 单机游戏 以下两个基于网络的 2.CS架构 cs--->client客户/server服务 服务端(应用程序)一个就够了,客户端(应用程序)可以有多个 ...

  8. C#2.0增功能04 可以为 null 的类型

    连载目录    [已更新最新开发文章,点击查看详细] 可以为 null 的类型是 System.Nullable<T> 结构的实例. 可以为 null 的类型可表示一个基础类型的所有值 T ...

  9. 关于页面scroolTop的获取

    scroolTop 发现问题 获取页面滚动高度的时候: 当html页面设置了DTD<!DOCTYPE html> document.body.scroolTop // 值总是为0: doc ...

  10. 关于python3与python2同时存在情况下导入pyqt失败解决记录

    最近感觉tkinter功能还是比较不适合新手做出高大上的界面,故开始使用pyqt,通过pip安装好了之后,利用qt设计师设计好界面之后,cmd运行之,报错提示没有找到pyqt5模块,IDE运行能正常加 ...