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:
<!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:
<!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:
<!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:
<!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:
<!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