Tailwind Whitespace: como usar o espaçamento de forma eficaz
Vamos dar um mergulho profundo na classe de espaço em branco do Tailwind neste artigo que abrange extensivamente todos os conceitos com exemplos .
Usando a propriedade white-space em CSS, você pode controlar como o espaço em branco dentro de um elemento é tratado.
As páginas da Web costumam usar essa propriedade para controlar a formatação do texto e o layout do elemento.
Índice-
Classes de espaço em branco do Tailwind
Tailwind CSS fornece uma variedade de classes que permitem controlar facilmente os espaços em branco no design do seu site.
Vamos dar uma olhada mais de perto nas classes de espaço em branco do Tailwind:
| Aulas | Visão geral |
| espaço em branco-normal | Essa classe é usada para definir a propriedade de espaço em branco de um elemento como normal. Isso significa que os caracteres de espaço em branco consecutivos, como espaços e tabulações, são recolhidos em um único espaço e as quebras de linha são tratadas como um único espaço. |
| espaço em branco-nowrap | A propriedade de espaço em branco de um elemento é definida como nowrap usando esta classe. Não haverá quebras de linha ou quebra de linha no texto dentro do elemento. |
| espaço em branco pré | Essa classe define a propriedade de espaço em branco de um elemento como pré. Todos os caracteres de espaço em branco, como espaços e tabulações, e quebras de linha dentro do elemento serão preservados. |
| espaço em branco pré-linha | Usando esta classe, você pode definir a propriedade de espaço em branco de um elemento como pré-linha. As quebras de linha serão preservadas no texto, mas os caracteres de espaço em branco consecutivos, como espaços e tabulações, serão recolhidos em um único espaço. |
| whitespace-pre-nowrap | A propriedade de espaço em branco de um elemento é definida como pre nowrap usando esta classe. Em outras palavras, todos os caracteres de espaço em branco e quebras de linha são preservados no elemento, mas o texto é exibido em uma única linha sem nenhuma quebra de linha. |
Sintaxe
<element class="whitespace-normal">...</element>
O exemplo a seguir mostra a implementação das classes whitespace-normal , whitespace-nowrap e whitespace-pre 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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold text-gray-700 my-3"Whitespace Class in Tailwind CSS
class="bg-gray-100 rounded-lg my-2"
class="p-4 whitespace-normal text-justify font-medium text-gray-700"
whitespace-normal:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
class="bg-gray-100 rounded-lg my-2"
class="p-4 whitespace-nowrap text-justify font-medium text-gray-700"
whitespace-nowrap:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
class="bg-gray-100 rounded-lg my-2"
class="p-4 whitespace-pre text-justify font-medium text-gray-700"
whitespace-pre:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
O exemplo abaixo demonstra as classes whitespace-pre-line e whitespace-pre-nowrap 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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold text-gray-700 my-3"Whitespace Class in Tailwind CSS
class="bg-gray-100 rounded-lg my-2"
class="p-4 whitespace-pre-line text-justify font-medium text-gray-700"
whitespace-pre-line:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
class="bg-gray-100 rounded-lg my-2"
class="p-4 whitespace-pre-nowrap text-justify font-medium text-gray-700"
whitespace-pre-nowrap:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
