css超出2行部分省略号...
今天做东西，遇到了这个问题，百度后总结得到了这个结果。
首先，要知道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超出2行部分省略号...的更多相关文章
- css超出多行隐藏
单行隐藏: overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段 ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- css 超出规定行数自动隐藏
单行overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 多行(兼容各个浏览器)//通过覆盖最后几个字的形式p{positio ...
- 【css】文本超出行数以省略号显示
//超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...
- css文本溢出隐藏显示省略号（单行+多行）
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- css超出一行添加省略号属性:text-overflow和white-space
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...
- css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- css实现超出一行后用省略号显示
css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...
随机推荐
- rm: 无法删除"/run/user/root/gvfs": 是一个目录 问题
2013-03-02 bxd@linux:~$ sudo su [sudo] password for bxd: root@linux:/home/bxd# exit exit rm: 无法删 ...
- Python——目录操作
注意之前要import os 1．获得当前路径 在Python中可以使用os.getcwd()函数获得当前的路径.其原型如下所示. os.getcwd() 该函数不需要传递参数,它返回当前的目录.需要 ...
- The connection to adb is down, and a severe error has occured.（DDMS中没有真机）
最近老是出现真机用着用着就掉线了,在DDMS中看不到,运行项目出现选择运行机器中也没有,360助手连接电脑OK,任务管理器中没有adb.exe,重启eclipse不行,只能每次重启电脑.按照http: ...
- codeforces D. Design Tutorial: Inverse the Problem
题意:给定一个矩阵,表示每两个节点之间的权值距离,问是否可以对应生成一棵树, 使得这棵树中的任意两点之间的距离和矩阵中的对应两点的距离相等! 思路:我们将给定的矩阵看成是一个图,a 到 b会有多条路径 ...
- Android开发切换host应用
由于在工作过程中常需要切换手机的host来测试不同服务器上的接口,所以想到需要这么个软件. SwitchHost在PC上是一款很好用的修改Host的软件,手机上也需要这么一款App(当然手机需要已经R ...
- 转载：第四弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿，每日更新！
感谢大家支持!博卡君周末休息了两天,今天又回到战斗状态了.上周五晚上微信放出官方工具和教程了,推荐程序猿小伙伴们都去试一试,结合教程和代码,写写自己的 demo 也不错. 闲话不多说,开始更新! 第七 ...
- 网狐6603棋牌游戏源码.rar
网狐6603棋牌游戏源码.rar http://pan.baidu.com/s/1dFgGNq5 网络收集仅供学习,下载后请务必在24小时内删除! 以上是原vc6.0源码,下载后使用vs2015编译, ...
- 重构if...else...或者switch程序块
我们在开发asp.net时,经常有使用if...else...或者是使用switch来进行多个条件判断.如下面这篇<用户控件(UserControl) 使用事件 Ver2>http://w ...
- 局域网电脑Sql2008 R2无法连接到localhost 解决方案
1.自己电脑加入加入了公司域的话,链接Sql Server服务器,用127.0.0.1或.或localhost登录时会提示如下错误: 2.解决措施: 打开Sql配置管理器->SqlServer网 ...
- 若干道Swift面试题
1,说说你认识的Swift是什么?Swift是苹果于2014年WWDC(苹果开发者大会)发布的新开发语言,可与Objective-C共同运行于MAC OS和iOS平台,用于搭建基于苹果平台的应用程序. ...