通过 CSS 的 text-overflow: ellipsis 或 JavaScript 动态截断并绑定 title 属性，可实现文件名超长时自动省略、悬停显示完整名称的用户体验优化方案。
通过 css 的 `text-overflow: ellipsis` 或 javascript 动态截断并绑定 `title` 属性，可实现文件名超长时自动省略、悬停显示完整名称的用户体验优化方案。
在文件上传场景中，原生 <input type="file"> 元素本身不提供文件名展示功能，需开发者手动提取并渲染。若直接将 files[0].name 插入页面，长文件名（如 very-long-project-config-with-timestamp-20241201.json）极易导致布局溢出或强制换行，影响界面整洁性。理想的解决方案应满足两个核心需求：视觉上简洁可控（固定长度截断） + 交互上信息无损（悬停可见全名）。
✅ 推荐方案：JavaScript 动态截断 + title 提示（兼容性强、语义清晰）
该方法无需隐藏原生 input，也不依赖绝对宽度限制，逻辑清晰且支持多文件：
<form id="formId"> <label for="inputId">Upload file</label> <input type="file" id="inputId" accept=".json,.manifest"> <span id="fileNameDisplay" style="margin-left: 8px; font-family: monospace; color: #333;"></span> </form>
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）。
此方案平衡了实现简洁性、浏览器兼容性与用户体验，是生产环境中推荐的标准实践。
