J2.02.1text resize without loss设计研究

放大后内容不得丢失或截断

别名: 文本缩放截断 · overflow hidden · 放大丢字

概念解释

把页面文本放大到常用检查点(例如 200%)之后,原先能读到的词不能从界面上消失。换行、折到下一列,都还在;被 overflow: hidden 剪掉、被省略号吃掉、按钮里只剩半个字,才是丢失。判据是信息还在不在,不是版面是否仍和设计稿一样整齐。换行本身不是失败。

机制

布局按 100% 字号预算行数和宽度。字变大以后,同一容器装不下原来那串字符。若容器选择裁切而不是变高或折行,多出来的字形就离开可视与可访问范围——有时 DOM 里还在,屏幕上已经没了,辅助技术也不一定能补回被视觉裁掉的那截(取决于是否真的从树上移除)。

设计师在默认字号下看见完整标签,截断是放大后才出现的状态,走查 100% 截图抓不到。单行标签、徽章、表格单元格、导航项最容易在宽度锁定时改用省略号。省略号若没有「完整内容仍可到达」的第二条路径(展开、标题属性对阅读器无用、悬停对键盘无效),就是丢失。图片里烤死的字不会随页面文本变大,那是另一条放大路径的问题,这里只处理页面文本被容器吃掉。

怎么研究

只把文本放大到 200%(或产品声明的检查点),对照 100% 逐条登记:完整、折行仍完整、出现省略、被裁切、控件不可读。键盘和阅读器再走一遍被裁切的控件,看名称是否还在。

自变量:放大倍数、容器的 overflow / white-space / line-clamp、是否另有展开路径。 因变量:丢失或截断的节点数、含义是否还可恢复、任务能否在放大后做完。

不要用整页缩小截图代替。自动检查很难判断「省略号背后那串是否还需要」,要对着任务问这句话没了能不能继续。

边界

有意为之的预览(列表摘要带「更多」)在放大后只要完整内容仍能打开,不算丢失。验证码、固定像素画布、地图标注受介质限制,要另给等价文本。数据表宽列需要横向滚动时,单元格内的字仍应完整,不要先裁字再滚动。更高倍数下改成单列重排是另一组要求;本组检查点上,先保证现有布局里字还在。

怎么落地

  • 文本容器默认允许换行和增高;禁止在标签、按钮、关键说明上用 hidden + nowrap 赌 100% 刚好装下。
  • 必须截断时提供可达的完整内容(展开按钮、详情页),不要只靠悬停或 title
  • 徽章和筛选筹码按内容撑开,或允许折成两行,不要固定成「四字宽」。
  • 验证:文本放到 200%,把每个标题、按钮、状态字、表格格对着 100% 清单勾。出现省略号或半个字又无法打开全文,记为缺陷。再用阅读器听被裁切控件的名字,确认不是「按钮」无名。

延伸

  • 同组J2.02.2 放大后不应产生双向滚动 · J2.02.3 固定高度容器是主要失败点
  • 相邻J2.11 文本缩放与重排 · J2.07 低视力与屏幕放大
  • 站内检索text resize · overflow hidden · WCAG 1.4.4

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.02.1