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

【问题标题】：How to show the name of file equal to the height and widh input如何显示文件名等于输入的高度和宽度
【发布时间】：2019-08-19 03:48:32
【问题描述】：

我用的是bootstrap 4，我的问题是当我放一个长名字的文件时，名字会从输入中消失

【问题讨论】：

请阅读how to ask
编辑问题，并显示您尝试过的代码..

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

如果您能提供代码示例会更好，但基本上您需要在input 上设置大小 - height 和 width 并在其上使用 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/

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

【讨论】：

使用溢出省略号对我有用

【解决方案2】：

减少名字的长度，比如

fileName=fileName.substring(0, 10);

【讨论】：