最近遇到一个需求是要在第二行的中间截取文本，因为在后面得贴一个图标，所以这种情况用常规的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。
)
