overflow

示例

显示溢出内容

使用 overflow-visible 工具类可以防止元素内的内容被裁剪：

Andrew AlfredTechnical advisor

<div class="overflow-visible ...">  <!-- ... --></div>

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

隐藏溢出内容

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

Andrew AlfredTechnical advisor

<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 工具类来允许水平滚动，并始终显示滚动条（除非操作系统禁用了常驻滚动条）：

水平滚动

Andrew

Emily

Whitney

David

Kristin

Sarah

<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 工具类为元素添加滚动条：

<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.