How to make text-overflow: ellipsis for input?

Question

css

in general guys, I can not think of correct solutions.
There is an input for + -30 visible characters (because O and j are of different widths), but for 70 characters the maximum available for input.
The customer requested that when blurring from the field (at this moment the text is automatically shifted to the visibility of the first character), if more characters are entered than fit in the field, an ellipsis is displayed at the end (as in text-overflow:ellipsis).
Question:
Is it possible to do this somehow correctly (at least not with a crutch), because there are 2 solutions in my head now:
When blurring, instead of input, put a block stylized under the input field, and on click change it to input. BUT!
Then you can’t immediately become, let’s say on the 6th character, because we are trite xs, where the user clicked. (you can, of course, calculate the length from the beginning of the input to the cursor, but that's not it)
Or create an invisible input to calculate its length, and if the length is greater than the static input, then add an ellipsis after it. But it's too crutch. Any other ideas?

Answer 1

I didn't really understand. text-overflow: why not?
Or give a link to the sandbox