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 ...
随机推荐
- 如何利用JavaScript遍历JSON数组
1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- directX--关于CSource和CSourceStream (谁调用了fillbuffer)
CSourceStream类,是CSource类的OutputPin[source.h/source.cpp]派生自CAMThread和CBaseOutputPinl 成员变量: CS ...
- IO网络模型
多路处理模型MPM MPM是Apache2引入的一个概念,就是将结构模块化.把核心任务处理作为一个可插拔的模块,使其能针对不同的环境进行优化 在这个情况下,就诞生出了处理模式的概念 Prefork 实 ...
- 一个简单的freemark输入输出的案例(二)
freemarker入门实例 1.设计思路 (1)新建Maven Project (2)生成freemarker模板 (3)写freemarker页面ftl文件 (4)写测试文件 2.新建Maven ...
- jquery 获取上传图片的大小(或者本张图片的其它属性)
<input type="file" name="upload" style="display:none;" src="${ ...
- IP地址校验
function validIp(fieldname,fielddesc){ var value = $.trim($("#key_"+fieldname).val()); var ...
- JDK1.5-1.7的特性
JDK1.5新特性: 1.自动装箱与拆箱 2.枚举(常用来设计单例模式) 3.静态导入 (import static java.lang.Math.*;) 4.可变参数 eg: public sta ...
- css图片的相关操作
css图片的相关操作 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta charset ...
- tp3.2 URL_MODEL为2 配置
1. tp项目index.php同级目录 add . htaccess文件 ,rewirte重写 内容为: <IfModule mod_rewrite.c> Options +Follo ...
- 【NOIP2009】【CJOJ1687】【洛谷1074】靶形数独
题面 Description 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z博士请教,Z 博士拿出 ...