如何显示等于高度和宽度输入的文件名

Question

我使用引导程序4，我的问题是当我放入一个长名称的文件时，该名称会从输入中消失

Answer 1

如果可以提供代码示例会更好，但是从本质上讲，您需要在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>

，然后使用JS将名称附加到.custom-file-label元素中，根据其文档，然后必须将隐藏的溢出设置为标签隐藏：

.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/

如果您使用代码示例和/或改进工具来更新问题，而不仅仅是提供有关所使用框架的详细信息，那么将来您将更快，更准确地获得帮助。

Answer 2

减少名称的长度，例如

fileName=fileName.substring(0, 10);