Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Now responds to screen resize and automatically initiates and destroys itself depending on whether it is needed or not.
Resize the below example to mobile size and you should see it all fire into action, resize again and it will automatically remove itself. Also fixed a bug where if you set the clamp to 200 lines it would make the box 200 lines tall! Obviously you can also just edit the number of lines using the input to see it fire into action.
Oh and you could use this with a very large block of text so that is an added bonus (as there is no counting involved).
Perhaps you could take the principle and turn it into a fully fledged component that accounts for incorrect inputs, auto inserts the HTML etc etc.
By the way your example one seems to have an issue if you resize the screen and then change the line values, as you can see in the following example I managed to get it in an open state (showing "read less") while only showing 9 lines when I set it to 10. I am sure mine has issues too but yours is in production so thought I better give you a heads up!
@joelbonetr
: Thanks for the reply, but about the flickering:
It will not cause flickering, because the actual repaint is done at the end of the function. The reflow is done everytime, but that will not show up on your screen.
I made a small Vanilla JS example: codesandbox.io/s/calculate-width-j...
Oeh I like this one, thanks. But yeah, not knowing if all is shown, is too bad.
Ok if you insist....😋
Now responds to screen resize and automatically initiates and destroys itself depending on whether it is needed or not.
Resize the below example to mobile size and you should see it all fire into action, resize again and it will automatically remove itself. Also fixed a bug where if you set the clamp to 200 lines it would make the box 200 lines tall! Obviously you can also just edit the number of lines using the input to see it fire into action.
Oh and you could use this with a very large block of text so that is an added bonus (as there is no counting involved).
Perhaps you could take the principle and turn it into a fully fledged component that accounts for incorrect inputs, auto inserts the HTML etc etc.
By the way your example one seems to have an issue if you resize the screen and then change the line values, as you can see in the following example I managed to get it in an open state (showing "read less") while only showing 9 lines when I set it to 10. I am sure mine has issues too but yours is in production so thought I better give you a heads up!
@joelbonetr : Thanks for the reply, but about the flickering:
It will not cause flickering, because the actual repaint is done at the end of the function. The reflow is done everytime, but that will not show up on your screen.
I made a small Vanilla JS example:
codesandbox.io/s/calculate-width-j...
@inhuofficial : niiiice! and thanks for the heads up. I will look into it ASAP