How to choose the allowed number of characters for a line so that the layout does not break?

Question

css

How to choose the allowed number of characters for a line if the block will be filled from the input field and you need to limit it?
Let me explain, there is a block of 180 px, there should be text (username) and it should not wrap to a new line. The Helvetica font in Latin fits 16 characters with the letter W and 59 characters with the letter I into the block
. Or maybe there are some options to calculate the total length of the string that will be obtained before receiving data from the form? What is the best way to deal with such a situation?

Answer 1

max-width: 180px;

Answer 2

div.text {overflow:hidden; display:block; width: 180px height:50px; text overflow: clip; }
div.text>p:last-of-type:after {content:"...";}
I think the idea is clear further to finish to taste.

Answer 3

Read about text-overflow , it might be easier not to limit the block size, but to hide what doesn't fit. I think it's perfect.
And it will be possible to calculate only dynamically, that is, when entering, because the letters (for example) "Ш" and "ь" have completely different widths, and the user can enter any set of characters.
By "dynamically" I mean, on each Keypress, process it - get the width of the letter (create a Text node with this letter and get its width) on the pressed key and already based on the remaining space in the block, or do preventDefault(), etc. or, in fact, allow the letter to be entered. But it's such a hassle :)