前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS控制文字只显示两行,超出部分显示省略号

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

作者头像
wfaceboss
发布2019-04-08 10:41:26
4.3K0
发布2019-04-08 10:41:26
举报
文章被收录于专栏:wfaceboss

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

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

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

(2)jquery.ellipsis.js   源代码

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

代码语言:javascript
复制
(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源代码

代码语言:javascript
复制
(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保持一致即可,例如、

代码语言:javascript
复制
 <div style="width:400px">

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

第三步:调用方法

代码语言:javascript
复制
   $(function () {
            $("[data-toggle='popover']").popover();
        });

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-11-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档