React中如何实现仅超长书籍标题hover时显示完整溢出文本

核心逻辑：不要给所有.book-title元素全局绑定hover展开效果，先逐元素检测文本是否真的溢出，只给溢出的元素添加可展开的样式类。

1. 调整CSS样式 #

拆分基础样式和溢出元素的专属hover样式，移除原来全局生效的.book-title:hover规则：

.book-title{
  font-weight: 600;
  height: 1.5rem;
  max-width: 15rem;
  overflow: hidden;
  padding-top: 0.7rem;
  transition: height 0.2s ease; /* 可选，加平滑展开动画 */
}
/* 仅带.is-overflow标记的元素触发悬停展开 */
.book-title.is-overflow:hover{
  height: 6rem;
  overflow: visible;
  position: relative;
  z-index: 10; /* 避免展开内容被相邻卡片遮挡 */
  background: #fff; /* 可选，加背景避免文字重叠时看不清 */
}

2. 实现元素溢出检测逻辑 #

React规范的实现方式是通过ref获取真实DOM，对比元素的实际内容宽高和可视区域宽高判断是否溢出，给符合条件的元素加上is-overflow类。推荐抽成独立可复用组件，避免在map循环里写重复逻辑：

import { useRef, useEffect } from 'react';

const BookTitle = ({ title }) => {
  const titleRef = useRef(null);

  useEffect(() => {
    const titleEl = titleRef.current;
    if (!titleEl) return;
    // 单行文本溢出判断用scrollWidth > clientWidth，多行场景补充scrollHeight判断
    const hasOverflow = titleEl.scrollWidth > titleEl.clientWidth || titleEl.scrollHeight > titleEl.clientHeight;
    if (hasOverflow) {
      titleEl.classList.add('is-overflow');
    }
  }, [title]);

  return <div className="book-title" ref={titleRef}>{title}</div>
};

3. 替换原有渲染逻辑 #

把map循环里直接渲染书名的代码替换成上面封装的组件即可：

const listsForFrontPage = listArray.map((book, id) => {
  return (
    <Link className="book-link" to={`/books/${book.book_id}`} key={id}>
      <div className="book-card">
        <div className="book-card-image">
          <img
            className="cover-image"
            src={book.cover_image}
            alt="The book cover"
          />
        </div>
        <div className="book-info">
          <BookTitle title={book.title} />
          <div className="author-name">{book.name}</div>
        </div>
      </div>
    </Link>
  )
})

补充提示 #

• 如果需要做响应式适配，可以监听窗口resize事件，在窗口尺寸变化时重新检测元素溢出状态，动态增删is-overflow类。
• 展开样式的高度、z-index、背景色可以根据自身页面设计调整，核心是只给溢出元素绑定hover效果。

内容的提问来源于stack exchange，提问作者deadant88