Tailwind CSS Whitespace
This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS white-space property. This class is used to control the text wrapping and white-spacing. There are several types of values in this property to use.
Whitespace classes:
- whitespace-normal
- whitespace-nowrap
- whitespace-pre
- whitespace-pre-line
- whitespace-pre-wrap
whitespace-normal: This is the default value of this class. When the whitespace class of tailwind is set to normal, every sequence of two or more whitespaces will appear as a single whitespace. The content in the element will wrap wherever necessary.
Syntax:
<element class="whitespace-normal">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Whitespace Class</b> <div class="mx-24 bg-green-200 rounded-lg"> <p class="p-4 whitespace-normal text-justify"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to pursue an engineering degree or wants to create a career on engineering field. </p> </div></body> </html> |
Output:
whitespace-normal
whitespace-nowrap: When the whitespace class of tailwind is set to nowrap, every sequence of two or more whitespaces will appear as a single whitespace. The content in the element will not be wrapped to a new line unless explicitly specified.
Syntax:
<element class="whitespace-nowrap">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Whitespace Class</b> <div class="mx-24 bg-green-200 rounded-lg"> <p class="p-4 whitespace-nowrap text-justify"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to pursue an engineering degree or wants to create a career on engineering field. </p> </div></body> </html> |
Output:
whitespace-nowrap
whitespace-pre: This value makes the whitespace have the same effect as the <pre>tag in HTML. The content in the element will wrap only when specified using line breaks.
Syntax:
<element class="whitespace-pre">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Whitespace Class</b> <div class="mx-24 bg-green-200 rounded-lg"> <p class="p-4 whitespace-pre text-justify"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to pursue an engineering degree or wants to create a career on engineering field. </p> </div></body> </html> |
Output:
whitespace-pre
whitespace-pre-line: When the whitespace class of tailwind is set to pre-line value, every sequence of two or more whitespaces will appear as a single whitespace. The content in the element will be wrapped when required and when explicitly specified.
Syntax:
<element class="whitespace-pre-line">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Whitespace Class</b> <div class="mx-24 bg-green-200 rounded-lg"> <p class="p-4 whitespace-pre-line text-justify"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to pursue an engineering degree or wants to create a career on engineering field. </p> </div></body> </html> |
Output:
whitespace-pre-line
whitespace-pre-wrap: When the whitespace class of tailwind is set to a pre-line value, every sequence of whitespaces will appear as it is. The content in the element will be wrapped when required and when explicitly specified.
Syntax:
<element class="whitespace-pre-wrap">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Whitespace Class</b> <div class="mx-24 bg-green-200 rounded-lg"> <p class="p-4 whitespace-pre-wrap text-justify"> Geeksforgeeks: A Computer Science portal for Geeks those who wants to pursue an engineering degree or wants to create a career on engineering field. </p> </div></body> </html> |
Output:
whitespace-pre-wrap
Please Login to comment...