自定义多文件上传按钮：如何实现文件名换行显示？

要实现选中的文件名换行显示，需要调整CSS样式规则与JavaScript的文件名拼接逻辑，具体操作如下：

1. 修改CSS样式 #

当前.file-upload__label设置了white-space: nowrap，会强制文本不换行，需要移除该属性并添加换行支持：

.file-upload__label {
  max-width: 250px;
  font-size: 0.95em;
  text-overflow: ellipsis;
  overflow: hidden;
  /* 移除强制不换行规则，添加换行识别 */
  white-space: pre-line;
  font-family: "Quicksand", sans-serif;
  display: block;
  margin-top: 15px;
  /* 可选：若文件名过多，添加垂直滚动条 */
  /* max-height: 120px; */
  /* overflow-y: auto; */
}

2. 修正并修改JavaScript代码 #

首先修复原代码的语法错误（querySelectorAll后需用.forEach遍历元素），再将逗号拼接替换为换行符拼接：

document.querySelectorAll(".file-upload__button").forEach(function(button) {
  const hiddenInput = button.parentElement.querySelector(".file-upload__input");
  const label = button.parentElement.querySelector(".file-upload__label");
  const defaultLabelText = "No file(s) selected";

  // 设置标签默认文本
  label.textContent = defaultLabelText;
  label.title = defaultLabelText;

  button.addEventListener("click", function() {
    hiddenInput.click();
  });

  hiddenInput.addEventListener("change", function() {
    const filenameList = Array.prototype.map.call(hiddenInput.files, function(file) {
      return file.name;
    });

    // 用换行符拼接文件名，配合CSS实现换行显示
    const displayText = filenameList.join("\n") || defaultLabelText;
    label.textContent = displayText;
    label.title = displayText;
  });
});

备选方案：使用HTML标签强制换行 #

如果更倾向于用<br>标签实现换行，可以改用innerHTML渲染，无需修改CSS的white-space属性：

hiddenInput.addEventListener("change", function() {
  const filenameList = Array.prototype.map.call(hiddenInput.files, function(file) {
    return file.name;
  });

  if (filenameList.length > 0) {
    label.innerHTML = filenameList.join("<br>");
    label.title = filenameList.join("\n"); // 鼠标悬停时仍显示换行文本
  } else {
    label.textContent = defaultLabelText;
    label.title = defaultLabelText;
  }
});

内容的提问来源于stack exchange，提问作者Robert Stem