输入字段文件名大时的对齐问题，如何解决问题...？

Question

在input type="file"中，当文件名较大（字数较多）时，对齐不正确...

我要..,当文件名变大时,它会显示为

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

To - New_InkDrops_HD_Green_screen_Template . . .

在这个简短的类型中，

怎么做...？

Answer 1

对该输入元素使用以下 CSS 规则：

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

您想要的效果称为“文本溢出”。详情：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

输入字段文件名大时的对齐问题，如何解决问题...？

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

javascript

file

input

textfield

reactjs