Layout
overflow
用于控制元素如何处理超出容器大小的内容的工具类。
| Class | Styles |
|---|---|
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 工具类防止元素内容被裁剪:
<div class="overflow-visible ..."> <!-- ... --></div>请注意，任何超出元素边界的内容都将显示出来。
隐藏溢出内容
使用 overflow-hidden 工具类裁剪超出元素边界的内容:
<div class="overflow-hidden ..."> <!-- ... --></div>根据需要滚动
使用 overflow-auto 工具类在内容超出元素边界时添加滚动条:
Scroll vertically
<div class="overflow-auto ..."> <!-- ... --></div>与总是显示滚动条的 overflow-scroll 不同，此工具类仅在必要时显示滚动条。
根据需要水平滚动
使用 overflow-x-auto 工具类在需要时允许水平滚动:
Scroll horizontally
Andrew
Emily
Whitney
David
Kristin
Sarah<div class="overflow-x-auto ..."> <!-- ... --></div>根据需要垂直滚动
使用 overflow-y-auto 工具类在需要时允许垂直滚动:
Scroll vertically
<div class="h-32 overflow-y-auto ..."> <!-- ... --></div>始终水平滚动
使用 overflow-x-scroll 工具类允许水平滚动并始终显示滚动条（除非操作系统禁用了始终显示滚动条）:
Scroll horizontally
AndrewEmilyWhitneyDavidKristinSarah<div class="overflow-x-scroll ..."> <!-- ... --></div>始终垂直滚动
使用 overflow-y-scroll 工具类允许垂直滚动并始终显示滚动条（除非操作系统禁用了始终显示滚动条）:
Scroll vertically
<div class="overflow-y-scroll ..."> <!-- ... --></div>全方向滚动
使用 overflow-scroll 工具类给元素添加滚动条:
Scroll vertically and horizontally
<div class="overflow-scroll ..."> <!-- ... --></div>与仅在必要时显示滚动条的 overflow-auto 不同，此工具类总是显示滚动条。请注意，某些操作系统（如 macOS）会隐藏不必要的滚动条，无论此设置如何。
响应式设计
Prefix an overflow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
