专栏首页wfacebossJS控制文字只显示两行,超出部分显示省略号

JS控制文字只显示两行,超出部分显示省略号

由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案。

第一步:依次引入jquery.js+jquery.ellipsis.js+jquery.ellipsis.unobtrusive.js。

(1)jquery.js源代码下载  http://jquery.com/

(2)jquery.ellipsis.js   源代码

可以通过该部分修改默认的行数,修改row的值即可。

(function($) {
    $.fn.ellipsis = function(options) {

        // default option
        var defaults = {
            'row' :2, // show rows
            'onlyFullWords': false, // set to true to avoid cutting the text in the middle of a word
            'char' : '...', // ellipsis
            'callback': function() {},
            'position': 'tail' // middle, tail
        };

        options = $.extend(defaults, options);

        this.each(function() {
            // get element text
            var $this = $(this);
            var text = $this.text();
            var origText = text;
            var origLength = origText.length;
            var origHeight = $this.height();

            // get height
            $this.text('a');
            var lineHeight =  parseFloat($this.css("lineHeight"), 10);
            var rowHeight = $this.height();
            var gapHeight = lineHeight > rowHeight ? (lineHeight - rowHeight) : 0;
            var targetHeight = gapHeight * (options.row - 1) + rowHeight * options.row;

            if (origHeight <= targetHeight) {
                $this.text(text);
                options.callback.call(this);
                return;
            }

            var start = 1, length = 0;
            var end = text.length;

            if(options.position === 'tail') {
                while (start < end) { // Binary search for max length
                    length = Math.ceil((start + end) / 2);

                    $this.text(text.slice(0, length) + options['char']);

                    if ($this.height() <= targetHeight) {
                        start = length;
                    } else {
                        end = length - 1;
                    }
                }

                text = text.slice(0, start);

                if (options.onlyFullWords) {
                    text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, ''); // remove fragment of the last word together with possible soft-hyphen characters
                }
                text += options['char'];

            }else if(options.position === 'middle') {

                var sliceLength = 0;
                while (start < end) { // Binary search for max length
                    length = Math.ceil((start + end) / 2);
                    sliceLength = Math.max(origLength - length, 0);

                    $this.text(
                        origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
                               options['char'] +
                               origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
                    );

                    if ($this.height() <= targetHeight) {
                        start = length;
                    } else {
                        end = length - 1;
                    }
                }

                sliceLength = Math.max(origLength - start, 0);
                var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
                var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);

                if (options.onlyFullWords) {
                    // remove fragment of the last or first word together with possible soft-hyphen characters
                    head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
                }

                text = head + options['char'] + tail;
            }

            $this.text(text);

            options.callback.call(this);
        });

        return this;
    };
}) (jQuery);

(3)jquery.ellipsis.unobtrusive.js源代码

(function ($) {
    var $ellipsis = $.fn.ellipsis;

    $ellipsis.unobtrusive = {

        parseElement: function (element) {
            var $element = $(element);
            var maxWidth = $element.data('ellipsis-max-width');
            maxWidth = maxWidth ? parseInt(maxWidth) : 0;
            var maxLine = $element.data('ellipsis-max-line');
            maxLine = maxLine ? parseInt(maxLine) : 1;
            $element.ellipsis({ maxWidth: maxWidth, maxLine: maxLine });
        },

        parse: function (selector) {
            $(selector).find("[data-ellipsis=true]").each(function () {
                $ellipsis.unobtrusive.parseElement(this);
            });
        }
    };


    $(function () {
        var beginAt = new Date;
        if($ellipsis.debug){
            console.log(beginAt);
        }

        $ellipsis.unobtrusive.parse(document);

        if($ellipsis.debug){
            var endAt = new Date;
            console.log(endAt);
            console.log(endAt - beginAt);
        }
    });
}(jQuery));

第二步:需要一个装载内容的容器,并在其上添加属性data-toggle="popover",data-ellipsis="true",data-toggle的值可以定义成其他的值,只需后续与调用的js保持一致即可,例如、

 <div style="width:400px">

 建议添加一个外层容器,同时添加一个固定宽度。

第三步:调用方法

   $(function () {
            $("[data-toggle='popover']").popover();
        });

 代码搬运,记录过程,便于后续的工作和学习。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 热词搜索_针对关键词的样式实现步骤

    wfaceboss
  • 分布式爬虫搭建系列 之三---scrapy框架初用

    其次,通过我们的神器PyCharm打开我们的项目--crawlquote(也可以将PyCharm打开我们使用虚拟环境创建的项目)

    wfaceboss
  • JavaScript适配器模式

    是完全不符合客户端的要求的。为了在保证客户端不变的情况下,又能使用新的类库,我们需要使用适配器模式。现在接口发生了变化,使用适配器兼容,以便适应客户端的不变

    wfaceboss
  • 第25次文章:行为型模式

    关注系统中对象之间的相互交互,研究系统在运行时对象之间的相互通信和协作,进一步明确对象的职责,共有11种模式。

    鹏-程-万-里
  • 程序员Java面试的陷阱

    程序员Java面试的陷阱2010年01月21日 星期四 22:27   找工作要面试,有面试就有对付面试的办法。以下一些题目来自我和我朋友痛苦的面试经历,提这...

    葆宁
  • Java继承特性以及重写现象的内存分析

    今天我们说一下Java面向对象中的一个特性-继承,然后做一下他的内存分析,理解一下重新现象的情况。

    何处锦绣不灰堆
  • 一天一个设计模式:装饰者模式

    装饰者模式又称为包装(wrapper)模式。装饰者模式对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案。

    用户1134788
  • 23种设计模式详解(五)

    南风
  • 温故而知新:设计模式之Builder

    Builder模式主要用于以下场景: 需要创建一个较复杂的大对象实例,并且构成该对象的子对象可能经常会发生变化,但是组成大对象的算法却相对稳定。 比如:我们做b...

    菩提树下的杨过
  • 温故而知新:设计模式之抽象工厂(AbstractFactory)

    抽象工厂主要用来解决多个系列的对象实例问题。 问题的应用场景(来源于李建忠老师的webcast讲座): 如果有一款游戏,里面有"道路,房屋,隧道,丛林"这四类基...

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券