js实现单双行文本溢出添加省略号
# 单双行文本溢出省略
```
// 2. 当内容过多的时候,单行省略号:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
// 3. 多行省略号:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden; /*---------------------------文本兼容省略号----------------*/
function wordlimit(cname,wordlength){ //参数分别为:类名,要显示的字符串长度
// var cname=document.getElementsByClassName(cname); //需要加省略符号的元素对象
for(var i=0;i<cname.length;i++){
var nowhtml=cname[i].innerHTML; //元素的内容
var nowlength=cname[i].innerHTML.length; //元素文本的长度
if(nowlength>wordlength){
cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...'; //截取元素的文本的长度并加上省略号
}
}
}
wordlimit($(".figureKorea figcaption"),19);
/*---------------------------引入插件ellipsis.js----------------*/
$('.shopText').ellipsis({
english: false,
lineNum: 2
});
js实现单双行文本溢出添加省略号的更多相关文章
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS 实现单、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
- css 单行和多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css-文本两行或多行文本溢出显示省略号(转)
转自:http://www.daqianduan.com/6179.html 感谢作者 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis ...
- css自动省略号...,通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...
随机推荐
- 笔记+R︱Logistics建模简述(logit值、sigmoid函数)
本笔记源于CDA-DSC课程,由常国珍老师主讲.该训练营第一期为风控主题,培训内容十分紧凑,非常好,推荐:CDA数据科学家训练营 ---------------------------------- ...
- md5加密用户登陆遇到的问题及解决办法
有个项目的登陆模块使用到了cas,应需求要求,用户名和密码传输时使用了md5加密模式,加密的密码可以直接保存在数据库,但是加密的用户名则必须解密出来才行,于是后台的java代码中便写了针对用户名的解密 ...
- 一个URL的组成
URL的组成 URL由三部分组成:协议类型,主机名和路径及文件名.通过URL可以指定的主要有以下几种:http.ftp.gopher.telnet.file等. URL的组成 URL的组成 协议 ...
- Win7/8出现An error occurred on the server when processing the URL解决办法
使用的是win8系统搭建的本地服务器,win7使用的方法是相同的.如果你的系统是精简版的Win7/8,那么安装IIS7也有可能出现这问题.下面SJY带领大家来解决这个错误. 解决方法 打开控制面板→管 ...
- Linux查看网络的联机状态
Linux查看网络的联机状态 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ netstat -a^C unix 3 [ ] 流 已连接 14923 @/tmp ...
- C# 枚举使用和对应说明获取实例
1.定义枚举 /// <summary> /// 订单状态 /// </summary> public enum OrderState { 待支付 = 1, 待处理 = 2, ...
- iOS - EaseMob 环信的使用
1.环信 环信使用的是 XMPP 协议,它是在 XMPP 的基础上进行的二次开发,对服务器 Openfire 和客户端进行功能模型的添加和客户端 SDK 的封装.环信的本质还是使用 XMPP,基于 S ...
- Git Compare with base,比较大文件时,长时间等待,无法加载
问题 当使用Git比较一个大文件(几十兆数量级)版本见差异时,会一直等待加载,且内存消耗很大,导致其他进程很难执行.任务管理器中,可以看到此时的TortoiseGitMerge吃掉3G左右的内存. 原 ...
- Visual Studio2010重新安装后,冲突问题
http://www.docin.com/p-685665064.html VS2010重装后出错解决办法 一般在卸载VS2010之后,也重新安装了一遍,有的时候可能会出现如下问题: 1. 未能正确加 ...
- 【BZOJ3110】K大数查询(整体二分)
[BZOJ3110]K大数查询(整体二分) 题面 BZOJ 题解 看了很久整体二分 一直不知道哪里写错了 ... 又把树状数组当成线段树区间加法来用了.. 整体二分还是要想清楚在干什么: 我们考虑第\ ...