How can I can make my text truncate to work on continuous responsive?

Question

I made a text truncate which check if overflow so it will show the ReadMore button, need to make it continuous reading the element height so it can show & remove the overflow activity on responsive now you can see in code sandbox it's need to be re-render to read the height but client want continuously work when he put the window in responsive view without the re-render

code sandbox demo: https://codesandbox.io/s/aged-breeze-bbqel

Answer 1

Assign the code you wrote to check for overflow and display ReadMore button as function to window resize handler. It will trigger each time a resize event occurs.

window.addEventListener('resize', function(event){
  // Check for overflow
});

Place the above code in useEffect onMount and add removeEventListener in the unMount part so that it wont be performed even when the component is not there.