Can I set a letters limit to a block?

Question

I'm trying to write something in a block however It goes out from maximum height... How can I set a limit (this limit should be independent of the font-size [ex: a 12px font can allow 10 letters but a 20px font just allows 5 letters])... So I did an example where the word "block" should be "ignore"...

https://code.sololearn.com/W1Z0r80MJ6Yr/?ref=app

Answer 1

Hi, if I got you right, you want to make sure that all the text that goes below the box border doesn't show at all.
You can do it like this:

<div style="height: 96px; width: 96px; border: 2px solid black; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;">
Hello, How are you... I do not know how to set a limit for this block bla bla bla...
</div>

You can also add font-size:20px; to see the difference.

The key point here is to set overflow to hidden, to hide any owerflow content followed by text-owerflow which is set to ellipsis to indicate that the text has been truncated

Answer 2

Hi Dejan Francuz🥇, It's a good idea but I need something like a "limit" 'cause if you use font-size:23px you'll see a part of letters or words that should be "deleted"