网站建设及解析流程免费百度下载

最近遇到一个需求是要在第二行的中间截取文本，因为在后面得贴一个图标，所以这种情况用常规的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 = textif(text.length > 39) newText = text.slice(0, 39)return newText 
}

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

  //判断字符串为中文字符串还是英文字符串，中文字符、符号占两个字符，英文字符、符号和数字占一个字符getStrLength = (str) => {let len = 0for(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。