为了实现在段落尾部超出文字替换为省略号，自己写的插件，并作了简单的优化。
下面给出脚本演示页面及注释，在此之前介绍一下插件参数
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);
时间： 2024-10-12 19:58:41