时间戳

首页 > 解决方案 > 如何显示文件名等于高度和宽度输入

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

问题描述

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

在此处输入图像描述

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

如果您可以提供代码示例会更好，但本质上您将需要设置大小 -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/

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

推荐阅读