Overflow 溢出
用于控制元素如何处理超出容器大小的内容的实用工具。
| Class | Properties |
|---|
基本用法
显示溢出的内容
使用 overflow-visible 来防止元素内的内容被裁剪。请注意，超出元素边界的任何内容将变为可见。
Andrew AlfredTechnical advisor
html
<div class="overflow-visible ..."></div>隐藏溢出的内容
使用 overflow-hidden 来裁剪元素内溢出元素的任何内容。
Andrew AlfredTechnical advisor
html
<div class="overflow-hidden ..."></div>必要时滚动
使用 overflow-auto 在元素内容溢出元素边界时添加滚动条。与 overflow-scroll 不同，后者总是显示滚动条，而此实用程序只在需要滚动时才显示它们。
Andrew AlfredTechnical advisor
Debra HoustonAnalyst
Jane WhiteDirector, Marketing
Ray FlintTechnical Advisor
html
<div class="overflow-auto ..."></div>必要时横向滚动
使用 overflow-x-auto 以允许必要时水平滚动。
Andrew
Emily
Whitney
David
Kristin
Sarahhtml
<div class="overflow-x-auto ..."></div>必要时垂直滚动
如果需要，可以使用 overflow-y-auto 进行垂直滚动。
Andrew AlfredTechnical advisor
Debra HoustonAnalyst
Jane WhiteDirector, Marketing
Ray FlintTechnical Advisor
html
<div class="overflow-y-auto h-32 ..."></div>始终横向滚动
使用 overflow-x-scroll 允许水平滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条。
AndrewEmilyWhitneyDavidKristinSarahhtml
<div class="overflow-x-scroll ..."></div>始终垂直滚动
使用 overflow-y-scroll 允许垂直滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条。
Andrew AlfredTechnical advisor
Debra HoustonAnalyst
Jane WhiteDirector, Marketing
Ray FlintTechnical Advisor
html
<div class="overflow-y-scroll ..."></div>在所有方向上滚动
使用 overflow-scroll 来为元素添加滚动条。与 overflow-auto 不同，后者只在必要时显示滚动条，而此实用程序始终显示它们。请注意，一些操作系统（如 macOS）会隐藏不必要的滚动条，而不管此设置如何。
Sun
Mon
Tue
Wed
Thu
Fri
Sat
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
5 AMFlight to vancouverToronto YYZ
6 AMBreakfastMel's Diner
5 PM🎉 Party party 🎉We like to party!
html
<div class="overflow-scroll ..."></div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:overflow-scroll 只在悬停时应用 overflow-scroll 实用程序。
html
<div class="overflow-auto hover:overflow-scroll">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:overflow-scroll 仅在中等屏幕尺寸及以上应用 overflow-scroll 实用程序。
html
<div class="overflow-auto md:overflow-scroll">
<!-- ... -->
</div>