Esta clase acepta más de un valor en Tailwind CSS . Todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad de espacios en blanco de CSS. Esta clase se utiliza para controlar el ajuste del texto y los espacios en blanco. Hay varios tipos de valores en esta propiedad para usar.
Clases de espacios en blanco:
- espacio en blanco-normal
- espacios en blanco ahora
- espacios en blanco-pre
- espacio en blanco-pre-línea
- espacio en blanco-pre-envoltura
whitespace-normal: este es el valor predeterminado de esta clase. Cuando la clase de espacio en blanco de viento de cola se establece en normal, cada secuencia de dos o más espacios en blanco aparecerá como un solo espacio en blanco. El contenido del elemento se ajustará donde sea necesario.
Sintaxis:
<element class="whitespace-normal">...</element>
Ejemplo:
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>
Producción:
espacio en blanco-normal
whitespace-nowrap: cuando la clase de espacio en blanco de tailwind se establece en nowrap, cada secuencia de dos o más espacios en blanco aparecerá como un solo espacio en blanco . El contenido del elemento no se ajustará a una nueva línea a menos que se especifique explícitamente.
Sintaxis:
<element class="whitespace-nowrap">...</element>
Ejemplo:
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>
Producción:
espacios en blanco ahora
whitespace-pre: este valor hace que el espacio en blanco tenga el mismo efecto que la etiqueta <pre> en HTML. El contenido del elemento se ajustará solo cuando se especifique mediante saltos de línea.
Sintaxis:
<element class="whitespace-pre">...</element>
Ejemplo:
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>
Producción:
espacios en blanco-pre
whitespace-pre-line: cuando la clase de espacio en blanco de viento de cola se establece en el valor de pre-línea, cada secuencia de dos o más espacios en blanco aparecerá como un solo espacio en blanco. El contenido del elemento se ajustará cuando sea necesario y cuando se especifique explícitamente.
Sintaxis:
<element class="whitespace-pre-line">...</element>
Ejemplo:
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>
Producción:
espacio en blanco-pre-línea
whitespace-pre-wrap: cuando la clase de espacio en blanco de tailwind se establece en un valor de línea previa, cada secuencia de espacios en blanco aparecerá tal cual. El contenido del elemento se ajustará cuando sea necesario y cuando se especifique explícitamente.
Sintaxis:
<element class="whitespace-pre-wrap">...</element>
Ejemplo:
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>
Producción:
espacio en blanco-pre-envoltura
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA