Overflow 溢出
溢出是针对数据显示方式的一种交互模式，它定义了数据内容在指定区域内如何显示的规则。
溢出类型
换行、截断、符号提示、滚动条、按钮。
换行
允许溢出的文本换行，当文本超出容器大小后将截断处理，在末尾用 ... 表示。
交互规则
- 鼠标悬停触发
Tooltip，显示详细的内容； - 卡片保持两行标题高度，当标题仅一行时，卡片高度不变；
- 当标题文本超出卡片固定尺寸时，截断处理并补充
...表示被截断文本。 - 鼠标悬停触发
Tooltip，显示详细的内容。
何时使用
- 对用户阅读至关重要的信息采用换行，例如同意书的信息。
- 当不确定文本是否重要，在空间允许的情况下换行。
何时不使用
- 如果信息对用户不重要或超出容器固定尺寸，则截断文本。
截断
截断会删除超出其容器大小的文本或其他项目。当文本被截断时，省略号...会附加到被截断的文本后以提醒有更多文本未展示。
交互规则
鼠标悬停触发 Tooltip ，显示详细的内容。
列表截断
字段最大宽度截断。
卡片截断
卡片最大宽度截断。
按钮截断
根据按钮最大宽度截断。
何时使用
- 如果信息对用户不重要。
- 当超过容器固定尺寸并且必须保留垂直或水平空间。
- 当容器具有固定尺寸。
- 截断的文本足以能识别全文信息，例如截断整篇文章的超链接。
何时不使用
- 不要截断对用户阅读至关重要的标题或文本，包括错误消息。
符号提示
图标也是一种传达更多信息的方式。
交互规则
鼠标悬停图标上，触发 Tooltip ，显示详细的信息。
表格
表格中可将详细信息截断，通过悬停对应单元格，触发 Tooltip ，显示详细的信息。
滚动条
当内容被截断到具有固定尺寸的容器中时，在容器内添加了一个滚动条以查看其余内容。
何时使用
- 必须保留容器的高度和宽度时使用溢出滚动，滚动条允许用户查看容器中的所有内容。
- 滚动条容器可通过键盘聚焦，使键盘用户通过键盘向上和向下键滚动查看容器中所有内容。
按钮
展开更多 或 收起 按钮支持用户展开查看容器中数量更多的数据或折叠起来的内容，这些按钮通常放置在一组内容的末尾。
交互规则
- 点击按钮将容器中剩余内容展开，或者通过点击跳转到相应页面查看内容；
- 下图示例中
展开更多的按钮位于列表底部，通过点击按钮展开查看剩余 8 条信息。
何时使用
- 按钮为用户提供一种显示更多、更少或查看所有数据的方法。
- 允许用户选择何时加载更多内容，这种按需加载更多数据的方式可以帮助减少用户的认知负担。
- 如果知道确切的项目数量，可在按钮中显示剩余的数据数量。