Guia rápido para estouro de vento de cauda
Neste artigo, examinaremos o estouro do Tailwind com exemplos e como usá-los para lidar com o estouro em seus aplicativos da web.
Antes de mergulharmos no estouro do Tailwind, vamos primeiro entender o que é a propriedade tradicional do estouro do CSS.
Em CSS, a propriedade overflow é usada para controlar o que acontece quando o conteúdo de um elemento HTML transborda seu contêiner.
A propriedade pode assumir quatro valores:
| valores | Visão geral |
| visível | O conteúdo transborda do contêiner, mas ainda está visível. |
| escondido | O conteúdo transborda do contêiner, mas fica oculto. |
| rolagem | O conteúdo transborda o contêiner e é rolável. |
| auto | O navegador decide se deseja exibir barras de rolagem com base na quantidade de estouro de conteúdo. |
Índice-
Estouro de vento de cauda
O estouro Tailwind permite que você gerencie como o conteúdo transbordante se comporta dentro de um elemento.
A propriedade overflow é usada para definir se o conteúdo deve ser recortado , exibir uma barra de rolagem ou permitir que o conteúdo transborde fora dos limites de um elemento.
Classes de estouro de vento de cauda
O Tailwind fornece um conjunto abrangente de classes para lidar com o estouro em seus aplicativos da web.
| Aulas | Visão geral |
| estouro automático | Essa propriedade adiciona uma barra de rolagem ao elemento quando o conteúdo transborda de seu contêiner. |
| estouro-oculto | Essa classe é usada para ocultar qualquer conteúdo que transborde um elemento. |
| clipe de estouro | Essa classe não apenas oculta o conteúdo excedente, mas também desativa os gestos de rolagem nos contêineres em que é usado. |
| estouro visível | O conteúdo excedente ficará visível fora dos limites do elemento e nenhuma barra de rolagem será mostrada para navegar pelo excesso. Este é o valor padrão. |
| rolagem de estouro | Essa classe permite que uma barra de rolagem apareça em um elemento quando o conteúdo dentro dela ultrapassa seus limites. |
| estouro-x-auto | Essa classe é usada para habilitar a rolagem horizontal de um elemento quando seu conteúdo ultrapassa sua largura. |
| overflow-y-auto | Essa classe permite a rolagem vertical para estourar o conteúdo dentro de um elemento quando ele excede a altura do elemento. |
| estouro-x-oculto | Um elemento com esta classe terá seu estouro horizontal oculto. |
| estouro-e-oculto | Um elemento com esta classe terá seu estouro vertical oculto. |
| estouro-x-clipe | Essa classe é usada para ocultar o conteúdo excedente e desabilitar os gestos de rolagem horizontalmente. |
| estouro-y-clip | Essa classe é usada para ocultar o conteúdo excedente e desabilitar os gestos de rolagem verticalmente. |
| estouro-x-visível | Essa classe permite que o conteúdo de estouro horizontal de um elemento seja visível e não cortado. Ele não adiciona nenhuma barra de rolagem nem desativa os gestos de rolagem |
| estouro-y-visível | Essa classe permite que o conteúdo de estouro vertical de um elemento fique visível sem recortá-lo. As barras de rolagem não são adicionadas ou os gestos de rolagem não são desativados. |
| estouro-x-rolagem | Role horizontalmente quando o conteúdo de um elemento exceder os limites do contêiner. |
| estouro-y-scroll | A rolagem vertical de um elemento é habilitada quando seu conteúdo excede seus limites. |
Sintaxe
<element class="overflow-auto">...</element>
Este exemplo cobre algumas das classes utilitárias da propriedade overflow no Tailwind, como overflow-auto , overflow-hidden , overflow-scroll , overflow-clip e overflow-visible :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Overflow class in Tailwind CSS
class="overflow-auto bg-gray-200
p-4 mx-16 h-24 text-justify"
class="font-semibold text-center"overflow-auto
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-hidden bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-hidden
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-clip bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-clip
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-scroll bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-scroll
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-visible bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-visible
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
O exemplo abaixo simplifica o entendimento das classes overflow-x-auto , overflow-y-auto , overflow-x-hidden , overflow-y-hidden , overflow-x-visible e overflow-y-visible no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Overflow class in Tailwind CSS
class="overflow-x-auto bg-gray-200
p-4 mx-16 h-24 text-justify"
class="font-semibold text-center"overflow-x-auto
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-y-auto bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-y-auto
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-x-hidden bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-x-hidden
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-y-hidden bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-y-hidden
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-x-visible bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-x-visible
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-y-visible bg-gray-200
p-4 mx-16 h-24 text-justify mt-20"
class="font-semibold text-center"overflow-y-visible
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
O exemplo a seguir lança alguma luz sobre as classes overflow-x-clip , overflow-y-clip , overflow-x-scroll e overflow-y-scroll no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Overflow class in Tailwind CSS
class="overflow-x-clip bg-gray-200
p-4 mx-16 h-24 text-justify"
class="font-semibold text-center"overflow-x-clip
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-y-clip bg-gray-200
p-4 mx-16 h-24 text-justify mt-20"
class="font-semibold text-center"overflow-y-clip
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-x-scroll bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-x-scroll
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
class="overflow-y-scroll bg-gray-200
p-4 mx-16 h-24 text-justify mt-4"
class="font-semibold text-center"overflow-y-scroll
Maecenas urna nisl, fringilla ut ultricies quis,
accumsan ut justo. Ut commodo, odio ut sodales
molestie, neque mauris scelerisque velit, eget
auctor massa lacus id sem. Etiam vestibulum
accumsan condimentum. Duis ac fermentum lectus.
Duis varius laoreet eros ac consectetur.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
