jquery.ellipsis.js段落超出省略号插件

最新推荐文章于 2023-08-11 10:41:57 发布

dgce32897

最新推荐文章于 2023-08-11 10:41:57 发布

阅读量158

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daysme/p/6635314.html

版权

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);

原：http://www.cnblogs.com/winderby/p/4122588.html

转载于:https://www.cnblogs.com/daysme/p/6635314.html

dgce32897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.ellipsis.js段落超出省略号插件

jquery.ellipsis.js段落超出省略号插件为了实现在段落尾部超出文字替换为省略号，自己写的插件，并作了简单的优化。下面给出脚本演示页面及注释，在此之前介绍一下插件参数1.lineNum：数字。限制段落的行数2.english：布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；3.OP_NUM: 数字。优化系数，一...
复制链接

扫一扫