Alignment issue when input field file name is big, how to solve the issue ...?-CodePudding

in input type="file", when file name is big(more words),then alignment is not proper...

I want.., when the file name will be big, then It will show like

From -New_InkDrops_HD_Green_screen_Template(1080p)fhdighdghfdgd9sfghfdughifdgh9dfgh9fdhjfd9ughdfsfjdsighifdsu h8uhrd8gthreughreuig 8hru8treht8urehtg9erhter87htgerugt.mp4

To - New_InkDrops_HD_Green_screen_Template . . .

in this short type,

how to do that...?

CodePudding user response：

Use the following CSS rule on that input element:

input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The effect you're after is called "text-overflow". Details: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow