Как показать имя файла, равное высоте и ширине ввода

Question

Я использую bootstrap 4, моя проблема в том, что когда я помещаю файл с длинным именем, имя будет выходить из ввода

Answer 1

Уменьшите длину имени, как

fileName=fileName.substring(0, 10);

Answer 2

Было бы лучше, если бы вы могли предоставить пример кода, но по сути вам нужно будет установить размер - height и width для вашего input и использовать overflow:hidden для него.

РЕДАКТИРОВАТЬ: Поскольку вы используете Bootstrap 4 и их реализацию входного файла, предполагая, что ваш HTML соответствует приведенному в их примере:

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

и вы добавляете имя к элементу .custom-file-label с помощью JS. Согласно их документации, вам нужно будет установить переполнение, скрытое для вашей метки:

.custom-file-label {
    overflow:hidden;
}

Скрипка здесь: https://jsfiddle.net/frked93u/7/

Если вам нужно более элегантное решение, я бы порекомендовал использовать многоточие переполнения и дополнительные отступы на метке, поэтому вместо обрезки середины текста он просто добавит многоточие в конец имени файла, когда метка не хватает места.

.custom-file-label {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right:75px;
}

Скрипка здесь: https://jsfiddle.net/frked93u/9/

В будущем вы будете получать помощь намного быстрее и точнее, если вы обновите свой вопрос с помощью примеров кода и / или работающей скрипки, а не просто предоставите подробные сведения об используемой вами платформе.