布局
overflow
用于控制元素如何处理超出容器大小的内容的实用程序。
| 类名 | 样式 |
|---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |
overflow-x-hidden | overflow-x: hidden; |
overflow-y-hidden | overflow-y: hidden; |
overflow-x-clip | overflow-x: clip; |
overflow-y-clip | overflow-y: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-y-visible | overflow-y: visible; |
overflow-x-scroll | overflow-x: scroll; |
overflow-y-scroll | overflow-y: scroll; |
示例
显示溢出的内容
使用 overflow-visible 实用程序来防止元素内的内容被裁剪。
Andrew Alfred技术顾问
<div class="overflow-visible ..."> <!-- ... --></div>请注意，任何溢出元素边界的内容都将可见。
隐藏溢出的内容
使用 overflow-hidden 实用程序来裁剪元素内任何溢出该元素边界的内容。
Andrew Alfred技术顾问
<div class="overflow-hidden ..."> <!-- ... --></div>在需要时滚动
使用 overflow-auto 实用程序，以便在其内容溢出该元素边界的情况下，为元素添加滚动条。
垂直滚动
Andrew Alfred技术顾问
Debra Houston分析师
Jane White营销总监
Ray Flint技术顾问
<div class="overflow-auto ..."> <!-- ... --></div>与始终显示滚动条的 overflow-scroll 不同，此实用程序仅在需要滚动时才显示滚动条。
在需要时水平滚动
使用 overflow-x-auto 实用程序，以便在需要时允许水平滚动。
水平滚动
Andrew
Emily
Whitney
David
Kristin
Sarah<div class="overflow-x-auto ..."> <!-- ... --></div>在需要时垂直滚动
使用 overflow-y-auto 实用程序，以便在需要时允许垂直滚动。
垂直滚动
Andrew Alfred技术顾问
Debra Houston分析师
Jane White营销总监
Ray Flint技术顾问
<div class="h-32 overflow-y-auto ..."> <!-- ... --></div>始终水平滚动
使用 overflow-x-scroll 实用程序，以允许水平滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条。
水平滚动
AndrewEmilyWhitneyDavidKristinSarah<div class="overflow-x-scroll ..."> <!-- ... --></div>始终垂直滚动
使用 overflow-y-scroll 实用程序，以允许垂直滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条。
垂直滚动
Andrew Alfred技术顾问
Debra Houston分析师
Jane White营销总监
Ray Flint技术顾问
<div class="overflow-y-scroll ..."> <!-- ... --></div>在所有方向上滚动
使用 overflow-scroll 实用程序，为元素添加滚动条。
垂直和水平滚动
周日
周一
周二
周三
周四
周五
周六
凌晨 5 点
凌晨 6 点
早上 7 点
早上 8 点
早上 9 点
上午 10 点
上午 11 点
中午 12 点
下午 1 点
下午 2 点
下午 3 点
下午 4 点
下午 5 点
下午 6 点
晚上 7 点
晚上 8 点
凌晨 5 点飞往温哥华的航班多伦多 YYZ
凌晨 6 点早餐梅尔餐厅
下午 5 点🎉 派对派对 🎉我们喜欢派对！
<div class="overflow-scroll ..."> <!-- ... --></div>与仅在必要时显示滚动条的 overflow-auto 不同，此实用程序始终显示滚动条。请注意，某些操作系统（如 macOS）会隐藏不必要的滚动条，而不管此设置如何。
响应式设计
前缀一个 overflow 实用程序 使用像 md: 这样的断点变体，仅在中等 屏幕尺寸及以上应用此实用程序。
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>在变体文档中了解有关使用变体的更多信息。
