溢出

​基本用法

​显示溢出的内容

使用 overflow-visible 以防止元素内的内容被剪切。请注意，任何溢出元素边界的元素将可见。

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

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

​隐藏溢出的内容

使用 overflow-hidden 来剪切元素中溢出该元素边界的任何内容。

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

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

​必要时滚动

使用 overflow-auto 为元素添加滚动条，以防其内容溢出该元素的边界。与始终显示滚动条的 overflow-scroll 不同，此实用程序仅在需要滚动时才显示滚动条。

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

黛布拉·休斯顿 分析师

简·怀特 营销总监

雷·弗林特 技术顾问

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

​必要时水平滚动

使用 overflow-x-auto 允许在需要时水平滚动。

安德鲁

艾米丽

惠特尼

戴维

克里斯汀

莎拉

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

​根据需要垂直滚动

如果需要，请使用 overflow-y-auto 允许垂直滚动。

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

黛布拉·休斯顿 分析师

简·怀特 营销总监

雷·弗林特 技术顾问

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

​始终水平滚动

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

安德鲁

艾米丽

惠特尼

戴维

克里斯汀

莎拉

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

​始终垂直滚动

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

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

黛布拉·休斯顿 分析师

简·怀特 营销总监

雷·弗林特 技术顾问

<div class="overflow-y-scroll ..."></div>

​向所有方向滚动

使用 overflow-scroll 可向元素添加滚动条。与仅在必要时显示滚动条的 overflow-auto 不同，此实用程序始终显示滚动条。请注意，某些操作系统（如 macOS）会隐藏不必要的滚动条，而不管此设置如何。

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

​有条件应用

​悬停、焦点和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:overflow-scroll 仅在悬停时应用 overflow-scroll 实用程序。

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

有关所有可用状态修饰符的完整列表，请查看 悬停、焦点和其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来针对媒体查询，例如响应式断点、暗模式、更喜欢减少运动等等。例如，使用 md:overflow-scroll 仅在中等及以上屏幕尺寸上应用 overflow-scroll 实用程序。

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

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。