转载 | CSS实现单行、多行文本溢出显示省略号（…）
本文引自：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实现单行、多行文本溢出显示省略号（…）的更多相关文章
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号（……）
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号（……）解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
- css 单行和多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css实现单行、多行文本溢出显示省略号(…)
一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...
- css自动省略号...，通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...
随机推荐
- RabbitMQ windows 安装后 此时不应有 \RabbitMQ。
在安装过程中,如果细心实际上在安装的细节显示starting Service后就已经提示这个问题,实际上就是没有注册到RabbitMQ这个服务. 在研究了很久之后才发现原来是安装路径的问题,原先是安装 ...
- 02(d)多元无约束优化问题-拟牛顿法
此部分内容接<02(a)多元无约束优化问题-牛顿法>!!! 第三类:拟牛顿法(Quasi-Newton methods) 拟牛顿法的下降方向写为: ${{\mathbf{d}}_{k}}= ...
- Oracle数据库---包
--根据员工号或员工姓名获取员工的信息--根据员工号或员工姓名删除员工的信息--创建包规范CREATE OR REPLACE PACKAGE overload_pkgIS FUNCTION get_i ...
- 开源SFTP客户端 WinSCP v5.13.5 Build 8967 绿色便携版
下载地址:点我 基本介绍 WinSCP 是一款可以在微软 Windows 系统环境下使用的支持 SSH 命令的开源图形化 SFTP 客户端工具.同时也支持 SCP 文件传输协议,它的主要功能是在本地与 ...
- JS时间处理，获取天时分秒。以及浏览器出现的不兼容问题
//获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...
- 个人永久性免费-Excel催化剂功能第92波-地理地址与经纬度互转功能
GPS设备和手机LBS的兴起,在地理信息存储过程中,在程序.应用级别是需要用经纬度去定位,而在数据分析的级别,特别是省市区镇街的分析,用到的是人可识别的文本类型存储,从设备中采集下来的数据和人工维护的 ...
- 题解 P3811 【【模板】乘法逆元】
P3811 [模板]乘法逆元 一个刚学数论的萌新,总结了一下这题的大部分做法 //一.费马小定理+快速幂 O(nlogn) 64分 #include<cstdio> using names ...
- 深入理解 JavaScript 单例模式 （Singleton Pattern）
概念 单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在. 核心:确保只有一个实例,并提供全局访问. 实现思路 一个类能返回对象一个引用(永远是同 ...
- npm常用命令(原创)
1.对于我们下载下来的node包,假设该包存在依赖情况执行: npm install(或者npm i) 下载依赖包: 下载依赖成功过后,文件夹内会产生package-lock.json文件: 2.下载 ...
- case和decode的用法(行转列)
创建了一张成绩表,如下图所示: 在oracle中,这两个函数我们都可以使用,代码及结果如下: decode用法: select Name,decode(Subject,'语文',1,'数学',2,'英 ...