移动端文件名省略需显式设置 width 或 max-width，仅用 text-overflow: ellipsis 无效；须配合 white-space: nowrap、overflow: hidden，并注意 ios safari 的 display、-webkit-white-space 兼容性及可访问性同步。
移动端文件名省略必须设 width 或 max-width
纯靠 text-overflow: ellipsis 不生效，因为移动端浏览器（尤其是 Safari iOS）对无宽度约束的 inline 元素不触发截断逻辑。即使父容器是 flex 项或 block，也得显式声明宽度控制点。
常见错误是只写：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，结果毫无反应。
- 推荐用
max-width: 80vw（避免贴边溢出）或width: 100%（配合box-sizing: border-box） - 若容器是
flex子项，加min-width: 0防止 Safari 强制撑宽 - 避免用
%百分比配padding而不设box-sizing，否则实际可用宽度不可控
单行截断要防 iOS Safari 的 white-space 失效
iOS 16+ 某些 Webview 中，white-space: nowrap 在 input[type="file"] 关联的 label 或 span 上可能被忽略，尤其当该元素有 display: inline 默认行为时。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 强制设
display: inline-block或display: block - 补上
-webkit-white-space: nowrap（虽非必需，但部分旧版 Safari 需要） - 别依赖
label直接包裹文件名——改用独立span或div渲染，再通过 JS 更新其textContent
悬停提示在移动端没用，title 属性必须换方案
title 在 iOS 和 Android Chrome 中基本不响应长按，且无样式控制权。所谓“悬停显示完整名”在触屏设备上是伪需求。
- 真需求是：点击/长按后浮现完整名 —— 用
ontouchstart+data-fullname+ 自定义 tooltip 或 toast - 若坚持轻量方案，可监听
click，把完整名写进alert()（仅调试用）或临时覆盖到当前元素的innerText - 别给文件名容器加
title，它既不触发，又可能干扰可访问性（AT 工具误读）
多文件场景下，别用 -webkit-line-clamp 做文件名截断
-webkit-line-clamp 对单个文件名做两行截断看似合理，但实际会破坏布局节奏：不同长度文件名导致高度不一致，列表项跳跃，滚动卡顿。
- 文件名本质是单行语义，强行多行截断反而降低识别效率
- 移动端手指操作区域有限，高度变化会误触相邻项
- 如真需多行展示（比如带路径的
/home/user/docs/...），改用 JS 计算字符数 +String.slice(0, n) + '...'更可控
最易被忽略的是：文件名截断不是纯视觉问题，它和点击热区、可访问性标签、屏幕阅读器播报顺序强耦合。一个 span 加了 aria-label 却没同步更新截断逻辑，就会让视障用户听到被砍掉一半的文件名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
