• 用JS解决多行溢出文本的省略问题


    前言

    在项目开发过程中,经常会遇到溢出文本的省略问题。根据需求,可以把文本省略分为单行文本省略和多行文本省略两类。

    单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支持了。但是多行文本,目前支持webkit内核的css样式 -webkit-line-clamp 可以做到,但它针对火狐浏览器就行不通了。这就是本文要解决的问题。

    css解决方案(可跳过)

    如果上网搜索【多行文本省略】,除了上文提到的css样式控制,找到的答案都是做固定位置的遮盖,而且能发现的是,目前几乎所有的博客都是这种方法(这大概是现在互联网技术博客的一个通病了,做原创的真的很少)。下面是这些方法的具体代码:

    方案一:webkit专属样式法

    div { /* 对容器本身做限制 */
      display: -webkit-box;     /* 弹性盒旧式语法 */
      -webkit-box-orient: vertical;    /* 经过个人实测,vertical或horizontal都没问题,只是必须设置该属性 */
      -webkit-line-clamp: 2;    /* 限制两行 */
      overflow: hidden;
    }

    方案二:css遮盖法

    p { 
      position: relative;
      height: 40px;
      line-height: 20px;       /* 限制两行 */
      overflow: hidden;
    }
    p:after {  /* 对文本标签本身做限制 */
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: #fff;
    }

    这种方法只能说想当然地解决问题,实际上很多时候它的效果并不理想——有时候最后的文字会“犹抱琵琶半遮面”,有时候本身文字还不够长时就出现了,如图:

    这里是以上代码的一个演示:css解决多行文本省略演示
    代码演示中case1无法体现效果。同样的代码,可以去张鑫旭大神的演示空间查看效果:-webkit-line-clamp下多行文字溢出点点点...显示实例页面

    JS解决方案

    当尝试用css解决不通时,就应该想到用js来解决。我找了很多网上的解决方案,有提到用插件的,也有提到上文css,但真的很少有提到用js的……而且这些解决方案的特点,上文也提到了,“天下文章一大抄”,往往还不提出原博客出处。

    这里提一下插件解决方案,主要是两个。一个是基于jQuery的dotdotdot,文档也很详细,但是license收费呀/(ㄒoㄒ)/~~;另一个是Clamp.js,纯js插件,虽然免费但是没什么文档,而且作者也好几年没更新了(这种坑就会很多了)……综上,网上的插件都不符合我的心理预期。

    好了,回到js解决方案,既然靠别人不行,那就靠自己吧。但是,用js实现文本省略最大的难点就是:如何知道哪段文本是溢出的?或者说怎么找到溢出文本并去掉?

    原理探究

    这里原理很简单,就是逐个增加文本字数,比较当时字数时文本的长度是否超过容器的长度。用jQuery来写也很简单,但是需要一些css样式做辅助,否则你根本达不到想要的效果。代码贴在下面:

    #container {
      border: 1px solid;
      height: 90px; 
       30px; // height 和 width 都必要
      /*overflow: hidden;*/
      overflow-wrap: break-word; // 设置文本溢出容器宽度时换行(但会溢出容器长度)
    }
    #content {
      line-height: 30px; // 必要,控制文本行数。否则文本会被挤压,行数不定
    }
    // jQuery 演示
    var $container = $('#container')
    var $content = $('#container .content')
    var str = $content.text()
    if ($content.height() > $container.height()) {
      for (var i = 0; i <= str.length; i++) {
        $content.text(str.slice(0,i))
        if ($content.height() > $container.height()) {
          $content.text(str.slice(0,i-2) + "..");
          break;
        }
      }
    }
    //===================================================================
    // 原生 JS 演示
    var container = document.getElementById("container");
    var content = container.firstElementChild;
    var str = content.firstChild.nodeValue;
    if (content.scrollHeight > container.offsetHeight) {
      for (var i = 0; i <= str.length; i++) {
        content.firstChild.nodeValue = str.slice(0,i);
        //console.log(content.scrollHeight + ":" + container.offsetHeight);
        if (content.scrollHeight > container.offsetHeight) {
          content.firstChild.nodeValue = str.slice(0,i-2) + "..";
          break;
        }
      }
    }

    可以看出,原理是很简单的,重点是熟悉一些基础知识。这里贴上以上代码的演示:js解决多行文本省略的演示

    接着还有什么?

    如果只是想要解决问题代码的同学,看到这里就ok了;如果想要再看我啰嗦一些东西,可以耐着性子继续看下去。

    刚刚原生 JS 为什么不用 height?

    如果有同学仔细比对两段代码,一定会有上面那个疑惑。事实上,DOM并没有提供height属性。

    但是,scrollHightoffsetHeight 又有什么区别呢?请看下图:

    上图中,红框的高度大致体现了 scrollHeight 的高度。假如对外框设置 overflow: hidden,红框会收缩至黑框内部,但是实际的 scrollHeight 还是原红框的高度。

    offsetHeightclientHeight 差不多,都是反映元素表现的高度。这三个更详细的区别请看这个文档:JavaScrip 教程 / DOM / Element 节点

    PS:经过本人实测,jQuery的 .height() 方法反映的是 scrollHeight,本场景是足以应付的,但是一些特殊情况还是需要用到DOM提供的。

    来个惊喜

    到这里该讲的差不多都说完了,但是因为我的项目中多处用到多行文本的省略,每次都copy实在非程序员所为。所以,我将这个方法插入jQuery,作为扩展的方法。将代码贴出来,造福和我一样萌萌的新人~

    /**
     * jQuery自定义函数
     */
    (function ($) {
        /**
         * 检查文字长度是否溢出,如果是则将溢出部分省略
         *
         *   注意:
         *   文字本身容器需设置line-height
         *   父物体容器需设置height和overflow-wrap: break-word(目前兼容性比较好的溢出换行样式)
         */
        $.fn.checkOverflow = function (parentClass) {
            $(this).each(function (id, el) {
                var $this = $(el);
                var $parent = $this.closest(parentClass);
                if ($this.height() > $parent.height()) {
                    var parentHeight = $parent[0].offsetHeight;
                    var thisText = $this.text();
                    for (var i = 0; i <= thisText.length; i++) {
                        $this.text(thisText.slice(0, i));
                        if (parentHeight < $this[0].scrollHeight) {
                            var str_all_cn = true;
                            // 判断省略号取代的三个字符是否全为中文字符
                            thisText.slice(i-2).split('').forEach(function (c,id) {
                                if (thisText.slice(i-2).charCodeAt(id) <= 255) {
                                    str_all_cn = false;
                                }
                            });
                            if (str_all_cn) {
                                $this.text(thisText.slice(0, i - 2) + "...");
                            } else {
                                $this.text(thisText.slice(0, i - 3) + "...");
                            }
                            break;
                        }
                    }
                }
            })
        };
    })(jQuery);

    总结

    虽然这个只是解决了实际项目开发中一个小得不能再小的问题,但是从头到尾写下来,我个人还是从中收获了很多。所以说,写专栏一时爽,一直写一直爽~

    最后,推荐一些在这个过程中发现的很有用的资料:

    (阮一峰)文档:JavaScript 教程 / DOM

    MDN 文档:CSS Text





  • 相关阅读:
    第09组(71) Alpha冲刺 (3/6)
    第09组 Alpha冲刺 (2/6)
    第09组 Alpha冲刺 (1/6)
    第09组(71)需求分析报告
    第07组 Beta冲刺(1/5)
    第07组 Alpha冲刺 总结
    第07组 Alpha冲刺 (6/6)
    第07组 Alpha冲刺 (5/6)
    第五次作业
    第07组 Alpha冲刺 (4/6)
  • 原文地址:https://www.cnblogs.com/ChanWunsam/p/10801218.html
Copyright © 2020-2023  润新知