E2.20.4tag overflow layout设计
标签数量过多时需要横向换行或纵向的展示策略
别名: 标签换行 · chip wrap · 标签单行溢出
概念解释
芯片一多，单行槽装不下。没有策略时，要么横向溢出成看不见的滚动条，要么把正在输入的光标挤出视口，人不知道已经打了哪些、下一条打在哪。溢出布局（tag overflow layout）事先决定是换行成多行，还是纵向堆叠，并保证输入插入点始终可见。它管的是很多枚时怎么摆，不是怎么确认或怎么删一枚。
机制
每枚芯片有不可压缩的宽度。单行加水平滚动把早期标签移出视野，核对和点关闭都要先滚，等于藏数据。把插入点钉在行尾、芯片向左推，是聊天输入的模型，核对更差。换行把集合展开为可读的二维，高度换可见性；要设一个最大行数，超出再在内部滚，以免把下面的表单顶没。纵向堆叠适合每枚都很长的词。无论哪种，正在写的那条未确认字符串必须和芯片分区，不能让光标夹在两枚中间找不到。
边界
预期最多两三枚时，换行策略是过度设计，单行即可。只读展示可以折叠成「+12」，输入中折叠会藏正在编辑的集合。动画换行若每加一枚都把后续字段顶跳，校验提示会错位。打印和窄邮件客户端不支持芯片，溢出布局还要能降级成逗号分隔文本。
怎么落地
- 芯片超过一行宽度就换行，插入点留在最后一行末尾可见处。
- 设最大高度，超出在标签区内滚动，不要无限撑高表单。
- 不要用只有一条细滚动条的单行来装十几枚。
- 验证：连续加上二十枚长短不一的标签，看是否还能看见最早一枚、能否点到它的关闭、光标是否仍在。单行里要横向狂滚才能找齐，布局策略就还没到位。