mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
51 lines
891 B
Markdown
51 lines
891 B
Markdown
---
|
|
extends: _layouts.markdown
|
|
title: "Overflow"
|
|
---
|
|
|
|
# Overflow
|
|
|
|
The overflow utilities are simply `overflow` property helpers.
|
|
|
|
```html
|
|
<div class="overflow-auto"></div>
|
|
<div class="overflow-hidden"></div>
|
|
<div class="overflow-visible"></div>
|
|
<div class="overflow-scroll"></div>
|
|
<div class="overflow-scroll-x"></div>
|
|
<div class="overflow-scroll-y"></div>
|
|
<div class="mask"></div>
|
|
```
|
|
|
|
```less
|
|
|
|
|
|
div {
|
|
.overflow-auto;
|
|
.overflow-hidden;
|
|
.overflow-visible;
|
|
.overflow-scroll;
|
|
.overflow-scroll-x;
|
|
.overflow-scroll-y;
|
|
.mask;
|
|
}
|
|
```
|
|
|
|
Note that `.overflow-hidden` is available in a shorthand called `.mask`.
|
|
|
|
## Responsive
|
|
|
|
The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
|
|
|
|
```html
|
|
<div class="overflow-auto sm:overflow-hidden md:overflow-visible lg:overflow-scroll"></div>
|
|
```
|
|
|
|
```less
|
|
div {
|
|
.screen(lg, {
|
|
.overflow-scroll;
|
|
});
|
|
}
|
|
```
|