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

最新推荐文章于 2024-03-29 16:49:01 发布

我们都是柠檬精诶

最新推荐文章于 2024-03-29 16:49:01 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_43392573/article/details/124341868

版权

React 同时被 3 个专栏收录

25 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

TypeScript

1 篇文章

订阅专栏

本文介绍如何使用CSS实现文本超出显示省略号，并结合JavaScript创建鼠标悬浮时的详细文本展示功能。isExceed函数用于判断字符串长度并决定是否显示悬浮文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
};