jquery.ellipsis.js段落超出省略号插件
为了实现在段落尾部超出文字替换为省略号，自己写的插件，并作了简单的优化。
下面给出脚本演示页面及注释，在此之前介绍一下插件参数
1.lineNum：数字。限制段落的行数
2.english：布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
3.OP_NUM: 数字。优化系数，一般不需要设置。默认1.3中文模式，1.3*2.5英文模式
演示效果
演示页面HTML代码
<!doctype html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test jquery.ellipsis.js</title>
<link rel="stylesheet" href="css/main.css">
</head> <script src="js/jquery-2.1.0.js"></script>
<script src="js/jquery.ellipsis.js"></script> <body>
<div class="textBox">
<p>
2004年参演电视剧《与青春有关的日子》，开始在影视圈崭露头角[1] 。2005年拍摄古装剧《锦衣卫》。2007年主演赵宝刚导演的青春剧《奋斗》；[2] 同年，主演首部电影《走着瞧》。2008年主演滕华涛执导的电视剧《蜗居》，饰演80后城市青年小贝。[1] [3] 2009年，在电影《海洋天堂》中扮演自闭症患者王大福；同年参演抗战题材的电视剧《雪豹》[4] 。2011年，主演的电视剧《裸婚时代》在各大卫视播出；[5] 2011年-2012年连续2年获得北京大学生电影节[6-7] 最受大学生欢迎男演员奖。2012年，凭借电影《失恋33天》获得第31届大众电影百花奖最佳男主角奖；[8] 同年成立自己经营的北京君竹影视文化有限公司，并导演第一部影视作品《小爸爸》。2013年2月，主演的电影《西游·降魔篇》在全国上映。
</p>
</div>
<div class="textBox2">
<p>
2004年参演电视剧《与青春有关的日子》，开始在影视圈崭露头角[1] 。2005年拍摄古装剧《锦衣卫》。2007年主演赵宝刚导演的青春剧《奋斗》；[2] 同年，主演首部电影《走着瞧》。2008年主演滕华涛执导的电视剧《蜗居》，饰演80后城市青年小贝。[1] [3] 2009年，在电影《海洋天堂》中扮演自闭症患者王大福；同年参演抗战题材的电视剧《雪豹》[4] 。2011年，主演的电视剧《裸婚时代》在各大卫视播出；[5] 2011年-2012年连续2年获得北京大学生电影节[6-7] 最受大学生欢迎男演员奖。2012年，凭借电影《失恋33天》获得第31届大众电影百花奖最佳男主角奖；[8] 同年成立自己经营的北京君竹影视文化有限公司，并导演第一部影视作品《小爸爸》。2013年2月，主演的电影《西游·降魔篇》在全国上映。
</p>
</div>
<script type="text/javascript"> $('.textBox').ellipsis({
english: false,
lineNum: 4
});
$('.textBox2').ellipsis({
english: false,
lineNum: 5
});
</script>
</body>
</html>
css
body {
font: 12px/1.5 "Microsoft YaHei",SimSun,Tahoma, Helvetica, Arial, sans-serif;
}
.textBox p{
text-indent: 20px;
}
.textBox2 {
width: 200px;
}
注释源码
//段落省略号插件
;(function($){
$.fn.ellipsis = function(options){
//插件参数
options = $.extend({
//英文模式
english : false,
//优化系数
OP_NUM: 1.3,
//目标行数
lineNum : 3,
}, options);
$(this).each(function(index, element) {
//优化系数
var OP_NUM = options.OP_NUM;
//wrap
var $wrap = $(this);
//目标p
var $p = $('p',$wrap);
//行数
var lineNum = options.lineNum;
//最初整篇文章
var originAll = $p.text();
//字体大小
var pFontSize = parseInt($p.css('font-size'));
//行高
var pLineHeight = parseInt($p.css('line-height'));
// 过去宽度
var oldWidth = $p.width();
// 现在宽度
var nowWidth = oldWidth;
//根据行数设置wrap高度
var wrapHeight = lineNum * pLineHeight;
$wrap.height(wrapHeight);
// 英文模式，字符偏多，系数*2.5
OP_NUM = options.english ? 1.3*2.5 : 1.3;
//首次加载先进行一次粗略筛选
$p.text(originAll.slice(0,lineNum * nowWidth/pFontSize * OP_NUM));
//主功能
function render(){
nowWidth = $p.width();
//当页面放大时，粗略筛选
if(nowWidth > oldWidth){
$p.text(originAll.slice(0,lineNum * nowWidth/pFontSize * OP_NUM));
}
oldWidth = nowWidth;
//核心筛选
while ($p.outerHeight() > wrapHeight) {
$p.text($p.text().replace(/\s?(\w+|\W{1,3})(\.{6})?$/, "......"));
};
}
render();
// 窗口拉伸;
$(window).resize(function(){
//利用异步将页面渲染操作合在一起
setTimeout(render,0);
})
});
};
})(jQuery);
jquery.ellipsis.js段落超出省略号插件的更多相关文章
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- jquery.nav.js定位导航滚动插件
jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
- jquery.fullPage.js全屏滚动插件
注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- jquery.ellipsis根据宽度(不是字数)进行内容截断，支持多行内容
jquery.ellipsis 自动计算内容宽度(不是字数)截断,并加上省略号,内容不受中英文或符号限制. 如果根据字数来计算的话,因为不同字符的宽度并不相同,比如l和W,特别是中英文,最终内容宽度会 ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
随机推荐
- 电子科大POJ "敲错键盘"
C-sources: #include<stdio.h> #define N 20 int main() { int i,j; ]={'Q','W','E','R','T','Y','U' ...
- A Knight's Journey 分类： dfs 2015-05-03 14:51 23人阅读 评论(0) 收藏
A Knight’s Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 34085 Accepted: 11621 ...
- poj 2632 Crashing Robots_模拟
做的差点想吐,调来调去,编译器都犯毛病,wlgq,幸好1a. 题意:给你机器人怎走的路线,碰撞就输出 #include <cstdlib> #include <iostream> ...
- aliCloud基于RAMService实现跨账户资源访问
1,aliCloud基于RAM service实现跨账户ECS资源访问Example 主要的资源为Instance,Image,Snapshot,disk,SecurityGroup Action太多 ...
- 【男性身材计算】胸围=身高*0.48(如：身高175cm的标准胸围=175cm*0.61=84cm)；腰围=身高*0.47(如：身高175c… - 李峥 - 价值中国网
[男性身材计算]胸围=身高*0.48(如:身高175cm的标准胸围=175cm*0.61=84cm):腰围=身高*0.47(如:身高175c- - 李峥 - 价值中国网 李峥:[男性身材计算]胸围=身 ...
- 单链表反转（递归和非递归） (Java)
链表定义 class ListNode { int val; ListNode next; ListNode(int x) { val = x; } } 非递归实现很简单,只需要遍历一遍链表,在遍历过 ...
- 【每日一MOS】-RAC and Sequences (853652.1)
序列有四种组合: a. CACHE + NOORDER b. CACHE + ORDER c. NOCACHE + NOORDER d. NOCACHE + ORDER 即使在单例配置下,当有大量的s ...
- C#接口的使用【转】
我们定义一个接口public interface IBark{ void Bark();}再定义一个类,继承于IBark,并且必需实现其中的Bark()方法public class Dog:IBa ...
- Activity（三）
常用控件 EditView.TextView.Button 设置layout,在fragment_main.xml配置控件 配置可编辑文本控件factorOne.factorTwo,显示文本控件sym ...
- ZCTF-ARM64-Re300
Re300-arm64 是一个64位的ARM程序.使用IDA加载,蹦出来这个框框,就是说IDA6.6还没有对ARM64位的程序实现relocation的分析. 就是由于这个,所以连对l ...