溢出控制

示例

显示溢出的内容

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

安德鲁·阿尔弗雷德技术顾问

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

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

隐藏溢出的内容

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

安德鲁·阿尔弗雷德技术顾问

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

按需滚动

使用 overflow-auto 工具类可以在内容超出元素边界的情况下为其添加滚动条：

垂直滚动

安德鲁·阿尔弗雷德技术顾问

德布拉·休斯顿分析师

简·怀特市场总监

雷·弗林特技术顾问

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

与 overflow-scroll 不同，该工具类仅在需要滚动时才会显示滚动条。

按需水平滚动

使用 overflow-x-auto 工具类允许在需要时进行水平滚动：

水平滚动

安德鲁

艾米丽

惠特尼

大卫

克里斯汀

莎拉

<div class="overflow-x-auto ...">  <!-- ... --></div>

按需垂直滚动

使用 overflow-y-auto 工具类允许在需要时进行垂直滚动：

垂直滚动

安德鲁·阿尔弗雷德技术顾问

德布拉·休斯顿分析师

简·怀特市场总监

雷·弗林特技术顾问

<div class="h-32 overflow-y-auto ...">  <!-- ... --></div>

始终水平滚动

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

水平滚动

安德鲁

艾米丽

惠特尼

大卫

克里斯汀

莎拉

<div class="overflow-x-scroll ...">  <!-- ... --></div>

始终垂直滚动

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

垂直滚动

安德鲁·阿尔弗雷德技术顾问

德布拉·休斯顿分析师

简·怀特市场总监

雷·弗林特技术顾问

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