Lzh on GitHub

overflow

控制元素如何处理超出容器范围的内容的实用工具。

快速参考

类样式
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

示例

显示溢出的内容

使用 overflow-visible 实用工具来防止元素内的内容被裁剪：

Andrew Alfred Technical advisor 
<div class="overflow-visible ...">
  <!-- ... -->
</div>

请注意，任何溢出元素边界的内容都将可见。

隐藏溢出的内容

使用 overflow-hidden 实用工具来裁剪元素内任何超出该元素边界的内容：

Andrew Alfred Technical advisor 
<div class="overflow-hidden ...">
  <!-- ... -->
</div>

需要时滚动

使用 overflow-auto 实用工具在元素内容超出其边界时向该元素添加滚动条：

TODO 滚动不生效

垂直滚动

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor 
<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 Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor 
<div class="h-32 overflow-y-auto ...">
  <!-- ... -->
</div>

始终水平滚动

使用 overflow-x-scroll 实用工具允许水平滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条：

水平滚动

Andrew
Emily
Whitney
David
Kristin
Sarah 
<div class="overflow-x-scroll ...">
  <!-- ... -->
</div>

始终垂直滚动

使用 overflow-y-scroll 实用工具允许垂直滚动，并始终显示滚动条，除非操作系统禁用了始终可见的滚动条：

垂直滚动

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor 
<div class="overflow-y-scroll ...">
  <!-- ... -->
</div>

所有方向滚动

使用 overflow-scroll 实用工具向元素添加滚动条：

垂直和水平滚动

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 AM Flight to Vancouver Toronto YYZ
6 AM Breakfast Mel's Diner
5 PM 🎉 Party party 🎉 We like to party! 
<div class="overflow-scroll ...">
  <!-- ... -->
</div>

与仅在必要时显示滚动条的 overflow-auto 不同，此实用工具始终显示滚动条。请注意，某些操作系统（如 macOS）无论此设置如何，都会隐藏不必要的滚动条。

响应式设计

使用断点变体（例如 md:）作为 overflow 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

<div class="overflow-auto md:overflow-scroll ...">
  <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。