Text overflow: ellipsis not working for dynamic placeholder (on focus)

Question

I have an input with a dynamic placeholder. On focus I change the placeholder but some reason I lose my text-overflow: ellipsis property. But when blurred I regain it. Any thoughts on why this is happening?

I've prepared a stackblitz to play with:

https://stackblitz.com/edit/angular-jadz6i

Answer 1

It's based on browser default functionalities. The purpose of the placeholder is to show whole information to user. But you can try it in Firefox, it works. Mine is 69.0.1 (64-bit) Firefox. Chrome doesn't support it.

Suggestions are

• make the input a little bigger
• Simplify the placeholder

Answer 2

Try like this:

input:focus {
   text-overflow: ellipsis;
}