多行文字收起和...展开的实现

需求: 你是不是也接到过这样的需求,文本超出多少行后隐藏,并在行末显示...和展开按钮

UI:效果图如下

 

概要:看似简单的需求背后隐藏着你所不知道的n多坑点,唯一看透真相的是一个外表看似文静,智慧却对不起外貌的程序猿--XX

方案:

(1)字节计算法:用这个方法不能用px来画页面,而应该用适配各种移动设备的rem,确保不同设备每行能摆下的字数一致,再大致定下

可视容器内能摆下的字节数a,之后计算出文本的字节数是否超出我们定下的a,一旦超出就视为溢出,记录当前的文本内容并加上...

代码如下:

overThreeLine (title) {
      const titleMaxLength = 110
      let len = 0 // 记录title的字节数
      let newTitle = ''
      for (let i = 0; i < title.length; i += 1) {
        const charCode = title.charCodeAt(i)
        if (charCode >= 0 && charCode <= 128) {
          len += 1
        } else {
          len += 2
        }
        if (len < titleMaxLength - 3) newTitle += title[i]
        if (len >= titleMaxLength) {
          this.showContent = newTitle + '...'
          this.showOpen = true
          return true
        }
      }
      this.showOpen = false
      this.showContent = title
      return false
 },

  坑点:一开始用上面的代码实现的功能并没有什么大问题,titleMaxLength尽量不要太大,不要设占满3行的字节数,一般情况下,不会有太大的问题,注意,一般情况下,不一般的情况呢,比如,测试做做的加上了文字表情😂😊,就像这样,问题就会暴露出来了

 

于是我试图在这个基础上补救,比如把表情标记出来,很显然文字表情不仅占了2个字符,那就当它占3个4个5个,怎么判断文字表情的方法网上很多代码,但我觉得那些都不是太靠谱,又长又累赘,下面是我最后用的替换文字表情的代码

const ranges = [
            '\ud83c[\udf00-\udfff]',
            '\ud83d[\udc00-\ude4f]',
            '\ud83d[\ude80-\udeff]'
        ];
emojireg = content .replace(new RegExp(ranges.join('|'), 'g'), '↙');
return emojireg;
           

  没错,因为是手机编辑的文本文案,我打赌没人会打上↙这个符号,那么只要判断↙就多加点字节,好像挺有道理的,然后我告诉你,不存在的,想象总是美好的,现实则会啪啪打脸,

总之,字节计算法,out

2、这个方法厉害了,我称之为矩矩交叠法

 

posted on 2019-09-25 18:54  栖木  阅读(772)  评论(0编辑  收藏  举报

导航