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 word-break de CSS . Esta clase se usa para especificar cómo dividir la palabra cuando la palabra llega al final de la línea. Los saltos de línea en el texto pueden ocurrir en ciertos espacios, como cuando hay un espacio o un guión.
Clases de salto de palabra:
- romper-normal
- romper-palabras
- Romper todo
break-normal: esta clase se utiliza para las reglas de salto de línea predeterminadas.
Sintaxis:
<element class="break-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 Word Break Class</b> <div class="mx-48 w-48 bg-green-200 rounded-lg"> <p class="p-4 break-normal"> GeeksGeeks: Acomputerscienceportalforgeeks </p> </div> </body> </html>
Producción:
break-words: se utiliza para dividir las palabras en puntos arbitrarios para evitar el desbordamiento.
Sintaxis:
<element class="break-words">...</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 Word Break Class</b> <div class="mx-48 w-48 bg-green-200 rounded-lg"> <p class="p-4 break-words"> GeeksGeeks: Acomputerscienceportalforgeeks </p> </div> </body> </html>
Producción:
break-all: se utiliza para dividir las palabras en cualquier carácter para evitar el desbordamiento.
Sintaxis:
<element class="break-all">...</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 Word Break Class</b> <div class="mx-48 w-48 bg-green-200 rounded-lg"> <p class="p-4 break-all"> GeeksGeeks: Acomputerscienceportalforgeeks </p> </div> </body> </html>
Producción:
romper toda clase
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA