Open In App

Tailwind CSS Word Break

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 word-break property. This class is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain spaces, like when there is a space or a hyphen.

Word Break classes:

  • break-normal
  • break-words
  • break-all

break-normal: This class is used for the default line break rules.

Syntax:

<element class="break-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 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


Output:

break-words: It is used to break the words at arbitrary points to prevent overflow.

Syntax:

<element class="break-words">...</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 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


Output:

break-all: It is used to break the words at any character to prevent overflow.

Syntax:

<element class="break-all">...</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 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


Output:

break all class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads