为了实现在段落尾部超出文字替换为省略号，自己写的插件，并作了简单的优化。

下面给出脚本演示页面及注释，在此之前介绍一下插件参数

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段落超出省略号插件的更多相关文章

  1. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  2. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  3. jquery.nav.js定位导航滚动插件

    jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...

  4. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  5. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

  6. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  7. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  8. jquery.ellipsis根据宽度(不是字数)进行内容截断，支持多行内容

    jquery.ellipsis 自动计算内容宽度(不是字数)截断,并加上省略号,内容不受中英文或符号限制. 如果根据字数来计算的话,因为不同字符的宽度并不相同,比如l和W,特别是中英文,最终内容宽度会 ...

  9. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

随机推荐

  1. C# 导出 excel 复杂格式 html导出

    /// <summary> /// 夜班津贴统计导出 /// </summary> public void ExportOtStat(string data) { var in ...

  2. centos curl web站点监控实践

    1,监控给定web站点的状态--站点请求返回代码,下载整个web站点页面文本到-o 指定的文本 curl -o /dev/null -s-silent -w--wirte-out "%{ht ...

  3. C++匈牙利命名法

    匈牙利命名法 匈牙利命名法是一种编程时的命名规范.基本原则是:变量名＝属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分.命名要基于容易记忆容易理解的原则.保证 ...

  4. 具体总结 Hive VS 传统关系型数据库

    本文思路,看图说话,一张图,清晰总结二者差别 以下对图中的各条做具体总结 1.查询语言 不做赘述 2.数据存储位置 不做赘述 3.数据格式 Hive:Hive 中未定义专门的数据格式,数据格式能够由用 ...

  5. chrome插件 postman 可以调用restful服务

    chrome插件 postman 可以调用restful服务

  6. C#获取URL参数值（NameValueCollection）

    在写程序的时候,我们经常需要对页面进行传参数,比如page?id=1234,那么在page这个页面中就直接可以使用string id = Request.QueryString["id&qu ...

  7. 移动前端开发之viewport的深入理解(转)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  8. CRC循环校验码

    为了防止数据在传输的时候丢失或被篡改,有了各种校验码. 每种CRC校验都有自己的多项式.每个多项式都有唯一对应的二进制. CRC16就如果名字一样,校验码就是16位的 如果CRC32就是32位的. 原 ...

  9. 图的广度优先/层次 遍历(BFS) c++ 队列实现

    在之前的博文中,介绍了图的深度优先遍历,并分别进行了递归和非递归实现.BFS 无法递归实现,最广泛的实现是利用队列(queue).这与DFS的栈实现是极其相似的,甚至代码几乎都很少需要改动.从给定的起 ...

  10. git撤销修改

    在Git中,删除也是一个修改操作,我们实战一下,先添加一个新文件test.txt到Git并且提交: $ git add test.txt $ git commit -m "add test. ...