溢出

用于控制元素如何处理超出容器的内容的功能类。

Default class reference

Class	Properties
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

可见

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

<div class="overflow-visible h-24 h- ...">Lorem ipsum dolor sit amet...</div>

自动

使用 overflow-auto 在一个元素的内容溢出该元素的边界时为其添加滚动条。不像 .overflow-scroll 总是显示滚动条，这个功能类只在需要滚动时才会显示。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.

<div class="overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

隐藏

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

<div class="overflow-hidden h-32 ...">Lorem ipsum dolor sit amet...</div>

需要时水平滚动

如果需要，使用 overflow-x-auto 来允许水平滚动。

QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F

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

需要时垂直滚动

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

<div class="overflow-y-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

始终水平滚动

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

始终垂直滚动

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="overflow-y-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>

在所有方向上滚动

使用 overflow-scroll 为元素添加滚动条。与 .overflow-auto 不同的是，.overflow-auto 只在必要时才显示滚动条，而这个功能类总是显示滚动条。需要注意的是，有些操作系统（比如macOS）会隐藏不必要的滚动条，而不考虑这个设置。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.

<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>

响应式

要只在特定的断点处应用 overflow 功能，请在现有的类名前添加 {screen}: 前缀。例如，将类 md:overflow-scroll 添加到一个元素中，就可以在中等大小及以上的屏幕上应用 overflow-scroll 功能类。

<div class="overflow-auto md:overflow-scroll ...">
  Lorem ipsum dolor sit amet...
</div>

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

定制

变体

默认情况下，针对 overflow 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 overflow 属性来控制为 overflow 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       overflow: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 overflow 功能，您可以通过在配置文件的 corePlugins 部分将 overflow property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     overflow: false,
    }
  }

Object Position Overscroll Behavior