react 超一行展示省略号并且当鼠标悬浮时展示文本全部内容

Demo:

title 就是展示鼠标悬浮的内容，当title的值为undefined时 titile 不展示。

import { isExceed } from '@/utils/utils';
.....
<div className="col-item-value"  title={isExceed(props.value, 28)}>
   {props.value}
 </div>
....

需要分成两步：

Step1：css部分超一行展示省略号

.col-item-value {
	  overflow: hidden;
	  line-height: 35px;
	  white-space: nowrap;
	  text-overflow: ellipsis;
}

Step2：js部分鼠标悬浮展示文本内容

/**
 * 计算目标字符串是否超过特定字节长度
 * @param s:字符串
 * @param n:字节长度（1字符（中文）= 2字节，1字母/数字=1字节）
 * @param return 超过返回要展示的悬浮文本，否则返回undefined不展示悬浮文本
 * 适用:文本超一行（特定字节长度）展示省略号和悬浮文本
 */
export const isExceed = (str: string, n: number) => {
  const len = str?.replace(/[^\x00-\xff]/gi, '--').length; // 将中文汉字转换成字节并计算字节长度
  return len > n ? str : undefined;
};