input type="file"长文件名对齐异常，如何实现文件名截断加省略号显示？

原生<input type="file">的样式由浏览器内置规则控制，无法直接调整文件名的截断逻辑，可通过「隐藏原生控件+自定义展示层」的方式实现需求，具体实现代码如下：

1. HTML结构 #

<div class="file-select-box">
  <!-- 隐藏原生文件选择控件 -->
  <input type="file" id="uploadFile" hidden>
  <!-- 自定义触发按钮 -->
  <button class="select-btn">选择文件</button>
  <!-- 自定义文件名展示区域 -->
  <span class="file-name-show">未选择文件</span>
</div>

2. CSS样式 #

核心通过text-overflow: ellipsis实现超出内容自动补省略号，无需手动计算字符长度，适配不同容器宽度：

.file-select-box {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 可根据业务需求调整容器总宽度 */
  width: 380px;
}
.select-btn {
  padding: 5px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.file-name-show {
  flex: 1;
  /* 核心截断样式 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 交互逻辑（JavaScript） #

const fileInput = document.getElementById('uploadFile');
const selectBtn = document.querySelector('.select-btn');
const nameShow = document.querySelector('.file-name-show');

// 点击自定义按钮触发文件选择
selectBtn.addEventListener('click', () => {
  fileInput.click();
});

// 监听文件选择事件，更新展示的文件名
fileInput.addEventListener('change', () => {
  if (fileInput.files.length) {
    nameShow.textContent = fileInput.files[0].name;
  } else {
    nameShow.textContent = '未选择文件';
  }
});

可选：JS手动截断字符 #

如果需要固定展示的字符长度，可直接在JS层做截断处理，替换上述change事件内的赋值逻辑即可：

const fullFileName = fileInput.files[0].name;
// 超出20个字符则截断加省略号，可自行调整长度阈值
nameShow.textContent = fullFileName.length > 20 ? `${fullFileName.slice(0, 20)}...` : fullFileName;

内容的提问来源于stack exchange，提问作者Sounak Das