js实现一行半文本的截取

最近遇到一个需求是要在第二行的中间截取文本，因为在后面得贴一个图标，所以这种情况用常规的css截取文本有点难处理。于是在上网查阅后发现了几个方法：第一种是用伪元素加定位，把.；11..盖在文字的上面；第二种就是用js来实现了。

首先贴下常规的css截取文本的代码，这种在大多数情况都可以适用

1、单行文本的溢出隐藏

white-space: nowrap;// 设置文字在一行显示，不能换行
overflow: hidden;// 文字长度超出限定宽度时隐藏溢出的内容
text-overflow: ellipsis;//  当文字溢出时，显示...来代表溢出的文本

2、多行文本的溢出隐藏

-webkit-line-clamp: 2;// 用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。
-webkit-box-orient: vertical;// 和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden;
text-overflow: ellipsis;

然后开始说下如何用js来实现

思路就是通过判断字符串的长度来找到截取的位置，然后用slice()方法获取从0到指定位置的字符，后面的字符都切掉，再补一个 ... 来实现。

noMoreWord = (text) => {
    let newText = text
    if(text.length > 39) newText = text.slice(0, 39)
    return newText 
}

但是这样处理其实是有漏洞的，因为设计稿是全中文的时候在一行半溢出隐藏，但是实际情况肯定会有英文字母、数字、英文符号出现的，而这些字符占的位置和中文占的位置是不一样的。所以在这里需要根据先获取字符的总字节，然后通过字节的长度来决定需不需要隐藏。下面是优化后的代码

  //判断字符串为中文字符串还是英文字符串，中文字符、符号占两个字符，英文字符、符号和数字占一个字符
  getStrLength = (str) => {
    let len = 0
    for(let i = 0; i < str.length; i++) {
      //中文字符
      if (str.charCodeAt(i) > 127) {
        len += 2 
      } else {
        len++
      }
    }
    return len
  }

  //字符串截取
  noMoreWord = (text, length, color='#000000') => {
    let newText = text;
    //字符长度大于参数length的，把后面多余的字符截取掉，替换为...。
    if (getStrLength(text) > length * 2) {
      newText = {text.slice(0, length)}...;
    }
    return newText
  };

 注意noMoreWord()中的length是你传入的长度，而getStrLength()中返回的是这串文本字节的长度，所以在判断时需要把length*2。