本文引自：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如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Examples</title>

<style type="text/css">

.demo{width:100px;}

</style>

</head>

<body>

<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>

<script>

// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，

// 直接用id获取domo对象

var oBox=document.getElementById('demo');

// slice() 方法可从已有的数组中返回选定的元素。

// 您可使用负值从数组的尾部选取元素。

// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

// 此处需要根据需求自行修改slice()的值，以达到要显示的内容

var demoHtml = oBox.innerHTML.slice(0,10)+'...';

// 填充至指定位置

oBox.innerHTML = demoHtml;

</script>

</body>

</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. HDU 6011：Lotus and Characters（贪心）

    http://acm.hdu.edu.cn/showproblem.php?pid=6011 题意:共有n种字符,每种字符有一个val和一个cnt,代表这个字符的价值和数量.可以制造的总价值是:第一个 ...

  2. zeroMQ 4 java

    自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...

  3. Xilinx ISE如何调用Modelsim进行联合仿真

    图: 在对设计的芯片进行测试时,经常要用到FPGA,可是里面的仿真工具却不如Modelsim那么好用,且在规模比较大时,ISE在仿真时,软件经常会报告内存限制的问题,此时一般会切换到Modelsim软 ...

  4. 哈工大计算机网络Week3-传输层

    目录 学习目标 传输层服务概述 传输层服务和协议 传输层 vs. 网络层 Internet传输层协议 多路复用和多路分用 多路复用/分用 分用如何工作? 无连接分用(UDP) 面向连接的分用 面向连接 ...

  5. 彻底搞清楚c#中的委托和事件

    一.什么是委托呢? 听着名字挺抽象,确实不好理解.面试官最喜欢考察这个,而且更喜欢问:“委托和事件有何异同?”.如果对一些知识点没有想明白,那么很容易被绕进去.研究任何事物,我们不妨从它的定义开始,委 ...

  6. 开设“C程序答疑解惑”的初衷

    博主经常在QQ群里.论坛里看到好多C语言初学者,甚至是有一定编程经验的人,咨询在编程中遇到的一些稀奇古怪的问题.博主对这些问题做过分析汇总,有些问题确实隐蔽的非常深,像break关键字用的不对啦,局部 ...

  7. 获取一个整数所有的质因数(C语言实现)

    一.题目要求 1. 用户输入任意一个整数,要求程序输出此整数所有的质因数: 2. 用户可以反复输入,直至输入字符'q'退出程序. 二.分析 质因数的概念大家可以问度娘. 题目关键有几个要点,分析透了这 ...

  8. android_layout_relativelayout(一)

    android的相对布局relativelayout也是一个值得研究的部分.先归纳下最近的几个心得. 相对布局中,xml文件第一个控件总是在屏幕的左上角为它的位置,别管你手机是竖着的还是横着的. 从第 ...

  9. Scala 函数式编程（一） 什么是函数式编程？

    为什么我们需要学习函数式编程?或者说函数式编程有什么优势?这个系列中我会用 scala 给你讲述函数式编程中的优势,以及一些函数式的哲学.不懂 scala 也没关系,scala 和 java 是类似的 ...

  10. Excel催化剂开源第48波-Excel与PowerBIDeskTop互通互联之第二篇

    前一篇的分享中,主要谈到Excel透视表连接PowerBIDeskTop的技术,在访问SSAS模型时,不止可以使用透视表的方式访问,更可以发数据模型发起DAX或MDX查询,返回一个结果表数据,较透视表 ...