js 字符串超长部分显示'...'的二种方法(css和js)

一、css方法

具体实现方法不再重复，可参见：css：文字超长后显示为 "..."

使用css实现的优点很明显，

1. 显示内容的长度可以根据容器宽度自动调整，而不需要计算
2. 可以简单的实现显示多行的效果。

但css方式也有一个很大的缺点，即当空间不够时，"..."会显示成".."，甚至"."，如果是"."会给人视觉上的误导，以为是字符串的结束符号。

二、js方法

采用js方法，需要处理一个核心问题，即字符的半角与全角问题，直接上干货：

/**
* limitLen 默认24位半角字符长度，可修改
**/
formatEllipsis(str = '', limitLen = 24) {
    let 
      len = 0,
      reg = /[\x00-\xff]/, //半角字符的正则匹配
      strs = str.split(''),
      inx = strs.findIndex(s => {
        len += reg.test(s) ? 1 : 2
        if (len > limitLen) return true
      })
    return inx === -1 ? str : str.substr(0, inx) + '...'
  }

采用js方式，可以解决上面css"..."显示成"."的问题，但采用js方式也有以下缺点：

1. 需要预估字符的长度
2. 预估长度后，不能随容器大小自适应变化（其实也可以实现，不过没css方便），不过一般来说，预估长度基本上足够了。