overflow

示例

显示溢出内容

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