Adding images for clear understanding.....

What about

text-overflow: ellipsis;
 /* BOTH of the following are required for text-overflow */
 white-space: nowrap;
 overflow: hidden;

?

though i have have added both in my CSS class its not working

Attaching the screenshot here

Is this code work for you?

https://jsfiddle.net/TjGyz/984/

No its not working for me. complete page styling was changed PFA

new button was created below the previous button but styling of page was changed since div tag was used in many places which took the stying of new class which you have sent.

I didn't expect you to use this style on your page. I'm just asking if the ellipsis works for you on that exemplary page.

I see the ellipsis in the DIV container, but not in the input field in the example.

Does that work for you Ty?

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

cor-el said

I see the ellipsis in the DIV container, but not in the input field in the example. Does that work for you Ty?

Yes, after adding a file with long filename to the input it actually works for me.

... or I may be wrong. Looks completely the same without text-overflow. The filename is not getting out the element. Specifying width is enough.

mask-image works for the input field although the editor doesn't like/recognize it.

• input { mask-image: linear-gradient(to left, transparent, black 1em); }
• https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

https://jsfiddle.net/TjGyz/984/ this one is working fine when i open it in chrome as well as in Mozilla but the actual problem was not solved.

at the end of ellipsis i have to show file extension as well in the UI

in chrome the extension is showing with your code PFA

Firefox and Chrome apply "width" to the file input differently. Firefox hides a length of text corresponding to the width of the Browse button. If you counteract that with padding-right:95px then the control in Firefox expands to show the full contents. Unfortunately, Chrome then has excess white space on the right:

https://jsfiddle.net/TjGyz/1016/

So that's not very satisfying.

Thanks a lot for your wonderful support... its working fine now in my portal now