今天做东西，遇到了这个问题，百度后总结得到了这个结果。

首先，要知道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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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文本超出2行就隐藏并且显示省略号的更多相关文章

  1. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  2. css文本超出2行就隐藏并显示省略号

    之前在网上看到过这样的代码,感觉有的时候还是挺有用的,故留个笔记. display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertica ...

  3. css 文本超出2行就隐藏并且显示省略号

    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webk ...

  4. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

  5. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  6. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  7. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  8. 关于H5 移动端css 文本超出时省略号 失效的问题

    之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...

  9. 转css中文英文换行、禁止换行、显示省略号

    css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01   word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...

随机推荐

  1. Axure学习笔记（一）

    Axture是一种快速制作原型的工具,在产品经理和体验设计师之中非常流行,不过现在产品经理比较难找,所以我只好上阵研究了一下.        经过几天的研究,看了小楼老师的一些视频,看了一些文档,做了 ...

  2. ES6之Set方法与Map方法

    ES6提供了新的数据结构--Set与Map,Set本身是一个构造函数且成员的值是唯一的,没有重复的值!!!Set()是一个存储已排序的无重复元素的数据而Map()是一对数据Map()使用关键值Key来 ...

  3. Ubuntu中启用ssh服务---转载

    ssh程序分为有客户端程序openssh-client和服务端程序openssh-server.如果需要ssh登陆到别的电脑,需要安装openssh-client,该程序Ubuntu是默认安装的.而如 ...

  4. IT服务(运维)管理实施的几个要点--第一章 IT服务质量的标准

    子曰"干的最好就是个60分,稍有纰漏就是不及格" 谈一个事情,最先要谈的就是统一标准,又或者这个标准已经约定俗成,广泛认可,所以就可以略过.对于IT服务质量来说,确实有一个统一的标 ...

  5. Python学习(三)：迭代器、生成器、装饰器、递归、算法、正则

    1.迭代器 迭代器是访问集合的一种方式,迭代对象从集合的第一个元素开始访问,直到元素被访问结束,迭代器只能往前不能后退,最大的优点是不要求事先准备好整个迭代过程中的元素,这个特点使得它特别适合用于遍历 ...

  6. 添加MD5 密码加密

        编辑 /etc/grub/grub.conf 配置文件 password = 123456 password --md5 $5$H.........SS grub-crypt  --md5   ...

  7. Java NIO （三） 通道（Channel）

    通道(Channel):由 java.nio.channels 包定义的,Channel 表示 IO 源与目标打开的连接.Channel 类似于传统的"流",只不过 Channel ...

  8. maven 打包Could not resolve dependencies for project和无效的目标发行版: 1.8

    1.maven 打包Could not resolve dependencies for project 最近项目上使用的是idea ide的多模块话,需要模块之间的依赖,比如说系统管理模块依赖授权模 ...

  9. java sql

    import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import ja ...

  10. 【转】java.lang.NoSuchMethodError: javax.persistence.Table.indexes()[Ljavax/persistence/Index;

    最近在配置最新的ssh(struts2.3.16.3+hibernate4.3.7+spring4.1.2)的时候遇到的这个错误提示,后来在网上找了半天都不能解决,虽然有个说法是model对象用这样@ ...