This project includes two custom hooks to calculate the maximum number of characters that can fit into a given html element.
The purpose is if the text width is larger than its contianer element, i.e. button, the extra text is truncated from middle with ellipsis.
For example, suppose original text is : 'longer text button', and suppose the container element's content width is 128px, then the result will be : 'longer...button'
For more explanation, please read this blog
See demo