How to elegantly identify whether a text-truncate has occurred in React?
I am currently using useEffect to compare scrollSize and clientSize, and optimize the render using memoization. I need to address performance issues, as there may be cases where I have hundreds of components on my page that need to be checked. Truncation can occur at different times for each component, depending on the length of the string. I believe I have written it correctly, but I am looking for the most optimal solution. Maybe someone has experience with this. BTW, if CSS scroll-state() container queries could be used for this case, it would be perfect. Thanks.
2 Replies
I don’t think I could be helpful but I’m curious if you can clarify /expand- what’s the next step ? Say you can identify all the components that have or have not experienced truncation ? Then what do you do w that information ?
When the text-truncate occurs, I want to show the show more button. Something like: https://codepen.io/luko248/pen/jOpaZOw?editors=1100