How to reduce text content instead of squeezing the text ?

If you look at this text part, this text content get reduced when width is reduced instead of squeezing the text. How can I do that ? I'm working on a React Application.
No description
10 Replies
Bismuth
Bismuthβ€’5mo ago
Monkeytype | A minimalistic, customizable typing test
The most customizable typing test website with a minimal design and a ton of features. Test yourself in various modes, track your progress and improve your speed.
Jochem
Jochemβ€’5mo ago
overflow: hidden; with the height set to a whole multiple of the line height if you look at the source, it's set as an inline style on the div:
<div id="wordsWrapper" translate="no" style="height: 117px; overflow: hidden;">
<div id="wordsWrapper" translate="no" style="height: 117px; overflow: hidden;">
Bismuth
Bismuthβ€’5mo ago
but content is not hidden when you start typing making width small those content are not hidden
Jochem
Jochemβ€’5mo ago
I don't know what you mean
Bismuth
Bismuthβ€’5mo ago
example on desktop width there is 50 words on that div but when i reduce the width there is 40 words
Jochem
Jochemβ€’5mo ago
yes, the rest is hidden by the overflow
Bismuth
Bismuthβ€’5mo ago
okay then, I will set height and make it overflow when you type text the reamning text is popped up how can i do that ?
Jochem
Jochemβ€’5mo ago
that's probably a lot of javascript
dysbulic πŸ™
dysbulic πŸ™β€’5mo ago
Properties you might find useful are line-clamp & text-overflow.