html - 输入类型文件 - 换行长文件名文本

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">