溢出与滚动

Overflow

样式与 CSS也叫：overflow、内容溢出、滚动条、文字截断

一句话：内容超出容器大小时的处理方式：露在外面、裁掉、出现滚动条，或者把长文字截断成省略号。

详细解释

内容超出容器的宽高就是溢出。overflow 决定怎么处理：visible（默认，内容露到外面）、hidden（裁掉超出部分）、auto（超出时才出现滚动条，最常用）、scroll（始终显示滚动条）。overflow-x、overflow-y 分别控制横向和纵向。

长文字截断也属于这一类：单行截断要同时写 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；多行截断用 line-clamp，Tailwind 里是 line-clamp-2。

常见问题：手机上页面能左右晃，通常是某个元素太宽横向溢出；overflow: hidden 会让吸顶失效，还会裁掉下拉菜单。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

卡片标题最多显示两行，超出部分用省略号，悬停时显示完整标题；右侧面板高度等于屏幕高度，内容超出时面板内部纵向滚动，页面本身不滚动；表格在手机上横向滚动，不要撑破页面宽度。