js实现一行半文本的截取-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 = <span>{text.slice(0, length)}<span style={{color: color}}>...</span</span>;
    }
    return newText
  };

注意noMoreWord()中的length是你传入的长度，而getStrLength()中返回的是这串文本字节的长度，所以在判断时需要把length*2。文章来源地址https://www.toymoban.com/news/detail-692106.html

到了这里，关于js实现一行半文本的截取的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！