输入类型文件-包装长文件名文本

Question

是否可以包装出现在浏览按钮旁边的文件名文本？

我有一个简单的上传按钮

<input type="file" />

我正在上传一个名称很长的文件，您可以看到出现了一个水平滚动条，可以读取全文：

我已经尝试过修改CSS，但是它添加了省略号，而且我想不出一种不用水平滚动条就能显示完整文件名的方法。

input[type="file"] {
    border: 1px solid red;
    white-space: normal;
    word-wrap: break-word;
    width: 200px;
    overflow: auto;
}

谢谢

Answer 1

这只能通过 JavaScript 实现。解决方案可能如下所示：

function update(e) {
  fileName.textContent = file.files[0].name;
}

const file = document.querySelector('#file'),
      fileName = document.querySelector('.file-name');

file.addEventListener('change', update);

.file-button {
  background: #eee;
  border: 1px solid #aaa;
  border-radius: 3px;
  display: inline-block;
  padding: 2px 8px;
}

.file-name {
  width: 200px;
  border: 1px solid #aaa;
  overflow-wrap: break-word;
  padding: 2px;
}

input[type='file'] {
  display: none;
}

<label class="file-label" for="file">Profile picture:
  <div class="file-button">Browse&hellip;</div>
</label>
<p class="file-name">No file selected.</p>
<input id="file" type="file">