F2.16.2named overflow policy truncate wrap or scroll设计

内容溢出容器时的处理方式(截断、换行、滚动)需要显式定义

别名: 溢出策略 · ellipsis · 内部滚动

概念解释

标题太长时,可以截成省略号、可以折下来把卡撑高、可以在格子里横滑。三种后果完全不同:截会丢信息,折会打乱行高和虚拟列表,内滚会造出不易发现的嵌套滚动条。引擎的默认(常常是可见溢出或自动折行)不是策略。每个槽都要写下溢出时走哪一条,以及用户怎么看到被藏住的那截。

未定义时布局被撑破,是下一张的事故。这一张要求先点名。

机制

截断把信息丢掉,必须配揭示:悬停、展开、详情页。主键(人的名字、订单号)被截到无法辨认,比较和识别都会失败。换行保信息,改的是高度;列表一旦高度不齐,虚拟化、砌体、吸顶都会跟着不齐。内部滚动保住外框,代价是多一个滚动容器,移动端很难发现,也容易和页面滚动抢手势。

政策要跟任务配:表的「金额」可以截(完整值在详情),「名称」往往要折;代码块更适合横滑而不是折得无法扫读。同一张卡里三个槽可以三套政策,混用没问题,混用不写才有问题。

边界

装饰性纹理、背景水印,溢出可以裁,不必揭示。法律文本、错误详情不能截。输入框的溢出是另一套(滚动光标),不要和展示槽共用省略号。打印时没有悬停,截断必须换成折或显式「见下页」。

怎么落地

  • 给每个文本和图槽写三选一:折 | 截+揭示方式 | 槽内滚动。主键默认不截死。
  • 截必须真的能看到全文(不只是 title 属性在触控上无效的那种)。
  • 验证:把槽灌到溢出。行为应与写下的政策一致:该截的出现省略并有一条揭示路径;该折的外框变高但邻格不被盖住;该滚的出现可发现的滚动提示(阴影或条),且滑这一槽不会带动整页。政策空白或「看看再说」的槽,补上再测。

延伸

  • 同组F2.16.1 布局需要用极端长度的内容(超长标题、空值)测试而非典型样例 · F2.16.3 未定义的溢出行为会导致布局被撑破或遮挡相邻元素 · F2.16.4 真实数据的长度分布往往比设计稿中的占位文本更极端
  • 相邻F4.10 文本截断与省略 · E4.04 粘性表头与横向滚动 · F2.09 瀑布流布局
  • 站内检索text-overflow · line clamp · overflow auto · ellipsis

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F2.16.2