如何在 HTML 中优雅显示上传文件名（截断+悬停提示）-js教程-PHP中文网

通过 CSS 的 text-overflow: ellipsis 或 JavaScript 动态截断并绑定 title 属性，可实现文件名超长时自动省略、悬停显示完整名称的用户体验优化方案。

通过 css 的 `text-overflow: ellipsis` 或 javascript 动态截断并绑定 `title` 属性，可实现文件名超长时自动省略、悬停显示完整名称的用户体验优化方案。

在文件上传场景中，原生元素本身不提供文件名展示功能，需开发者手动提取并渲染。若直接将 files[0].name 插入页面，长文件名（如 very-long-project-config-with-timestamp-20241201.json）极易导致布局溢出或强制换行，影响界面整洁性。理想的解决方案应满足两个核心需求：视觉上简洁可控（固定长度截断） + 交互上信息无损（悬停可见全名）。

✅ 推荐方案：JavaScript 动态截断 + title 提示（兼容性强、语义清晰）

该方法无需隐藏原生 input，也不依赖绝对宽度限制，逻辑清晰且支持多文件：

const inputEl = document.getElementById("inputId");
const displayEl = document.getElementById("fileNameDisplay");

// 配置项（按需调整）
const MAX_DISPLAY_LENGTH = 16;
const ELLIPSIS = '…'; // 推荐使用 Unicode 省略号（比 '...' 更紧凑）

inputEl.addEventListener('change', (e) => {
  const files = e.target.files;
  if (files.length === 0) {
    displayEl.textContent = '';
    displayEl.title = '';
    return;
  }

  // 支持多文件：合并为逗号分隔字符串
  const fullNames = Array.from(files).map(f => f.name);
  const fullText = fullNames.join(', ');

  // 设置 title 实现悬停提示（浏览器原生支持，无障碍友好）
  displayEl.title = fullText;

  // 截断逻辑：仅按字符数（非像素宽度），适用于大多数场景
  if (fullText.length > MAX_DISPLAY_LENGTH) {
    displayEl.textContent = fullText.slice(0, MAX_DISPLAY_LENGTH) + ELLIPSIS;
  } else {
    displayEl.textContent = fullText;
  }
});

? 为什么不用纯 CSS text-overflow: ellipsis？
它要求容器必须设置 white-space: nowrap、overflow: hidden 和固定宽度（如 width: 200px） —— 但文件名长度不可预知，固定宽度易造成空间浪费或截断过度。而 JavaScript 方案基于语义长度控制，更可靠、响应式友好。

⚠️ 注意事项与增强建议

无障碍支持：title 属性虽能触发悬停提示，但对屏幕阅读器用户支持有限。如需更高可访问性，推荐用 aria-label 替代或补充：
```
displayEl.setAttribute('aria-label', `Selected: ${fullText}`);
```
像素级精准截断（进阶）：若设计要求严格按容器宽度动态适配（例如响应式卡片内），可结合 getBoundingClientRect() 与 Canvas 测量文本宽度，但会增加复杂度，普通项目不建议。
重置逻辑：用户取消选择（如再次点击 input 但取消选取）时，files.length 为 0，上述代码已妥善处理清空状态。
样式微调：为提升可读性，建议给显示区域添加轻量样式（如 font-family: system-ui, sans-serif、color: #4a5568、font-size: 0.95em）。

此方案平衡了实现简洁性、浏览器兼容性与用户体验，是生产环境中推荐的标准实践。