Make text overflow visible on hover using react, CSS - css

Question

I have an array of divs containing book names that I generate using a .map function on some fetched data from my database. Some of the book names are too long so I have used the following CSS to hide them:
.book-title{
font-weight: 600;
height: 1.5rem;
max-width: 15rem;
overflow: hidden;
padding-top: 0.7rem;
}
But I would like to make the text visible when user hovers over the div. My current solution applies to all divs generated and displayed by the .map function - I am unsure how to make it just apply to divs where the text is too long.
.book-title:hover{
height: 6rem;
overflow: visible;
}
Is there a proper way to do this with react?
here is the relevant .jsx
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">
<div className="book-title">{book.title}</div>
<div className="author-name">{book.name}</div>
</div>
</div>
</Link>
)
})

Answer 1

You need to check if the element is overflowing
add useRef:
const refs = useRef(listArray.map(() => React.createRef()));
then you should create a function that checks if the element is overflowing:
const isOverflown = (el) => {
if(!el) return;
const { clientWidth, clientHeight, scrollWidth, scrollHeight } = el;
return scrollHeight > clientHeight || scrollWidth > clientWidth;
}
and then you need to add class based on isOverflown value:
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">
<div ref={refs.current[id]} className={`book-title ${isOverflown(refs.current[id].current) ? 'book-title-overflow' : ''}`}>{book.title}</div>
<div className="author-name">{book.name}</div>
</div>
</div>
</Link>
)
})
don't forget to add your css:
.book-title-overflow:hover{
height: 6rem;
overflow: visible;
}