转载 | 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 ...
随机推荐
- LightOJ 1422：Halloween Costumes（区间DP入门）
http://lightoj.com/volume_showproblem.php?problem=1422 题意:去参加派对,有n场派对,每场派对要穿第wi种衣服,可以选择外面套一件,也可以选择脱掉 ...
- 利用HtmlAgilityPack插件写的一个抓取指定网页的图片 第一次写 很乱 随便看看就行
public partial class Form1 : Form { /// <summary> /// 存放图片地址 /// </summary> List<stri ...
- 基于C#的机器学习--旅行推销员问题
我们有一个必须在n个城市之间旅行的推销员.他不在乎什么顺序.他最先或最后访问的城市除外.他唯一关心的是他会去拜访每一个人,每个城市只有一次,最后一站是他得家. 每个城市都是一个节点,每个节点通过一条边 ...
- C语言学习书籍推荐《C语言入门经典(第5版)》下载
霍尔顿 (Ivor Horton) (作者), 杨浩 (译者) 下载地址:点我 C语言是每一位程序员都应该掌握的基础语言.C语言是微软.NET编程中使用的C#语言的基础:C语言是iPhone.iPad ...
- .net core2学习笔记
在Linux上安装完netcore的sdk后,发现每次重新登录dotnet命令都会失效,咨询完同事后才知道之前的设置只是临时变量,需要vim /etc/profile 编辑这个文件,把环境变量写入 ...
- python PEP8常用规范
python 常用PEP8规范 一 代码编排 1 缩进.4个空格的缩进(编辑器都可以完成此功能),不使用Tap,更不能混合使用Tap和空格.2 每行最大长度79,换行可以使用反斜杠,最好使用圆括号 ...
- Fiolki题解
问题 B: Fiolki 时间限制: 3 Sec 内存限制: 128 MB 题目描述 化学家吉丽想要配置一种神奇的药水来拯救世界. 吉丽有n种不同的液体物质,和n个药瓶(均从1到n编号).初始时,第 ...
- 判断小端大端(C实现)
C程序中的大端小端概念可以参见上一篇文章 如何区分小端和大端.本文重点讨论如何用C程序来判断当前系统是大端还是小端. 判断大端小端的程序如下: #include <stdio.h> int ...
- Golang 高效实践之并发实践
前言 在我前面一篇文章Golang受欢迎的原因中已经提到,Golang是在语言层面(runtime)就支持了并发模型.那么作为编程人员,我们在实践Golang的并发编程时,又有什么需要注意的点呢?下面 ...
- Linux下程序下载
每个开发板/PC机都有硬盘(ROM,read only memory,只读存储器)和运行内存(RAM,random access memory,随机存取存储器).其中Nand/Nor flash相当于 ...