Tailwind CSS - Text Wrap

Previous
Quiz
Next

Tailwind CSS Text Wrap is a collection of predefined classes that control text wrapping within its container, offering options for normal wrapping, wrapping words to the next line, or preventing wrapping altogether.

Tailwind CSS Text Wrap Classes

Below is a list of Tailwind CSS Text Wrap classes with properties that manage how text wraps within its container.

Class CSS Properties
text-wrap text-wrap: wrap;
text-nowrap text-wrap: nowrap;
text-balance text-wrap: balance;
text-pretty text-wrap: pretty;

Functionality Of Tailwind CSS Text Wrap Classes

  • text-wrap: This class allows text to wrap within its container.
  • text-nowrap:This class prevents text from wrapping, keeping it on a single line without breaking.
  • text-balance: This class evenly balances text across lines, optimizing line breaks for more consistent line lengths.
  • text-pretty:This class prevents orphans, ensuring that a single word does not appear alone on the last line of a text block.

Tailwind CSS Text Wrap Class Examples

Below are examples of Tailwind CSS Text Wrap classes that show how text wrapping behaves within its container.

Wrap Overflowing Text Onto Multiple Lines

This example shows how the text-wrap class allows the text to wrap within its container, ensuring it flows naturally within the specified width without overflowing.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
     <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
     <p class="underline font-bold"> 
        Applying Text Wrap
    </p>

    <div class="w-64 bg-gray-200 p-4">
        <p class="text-wrap text-lg">
            Tutorialspoint covers a wide array of programming
            languages, Frameworks, and tools. Whether you're 
            interested in Java, Python, C++, JavaScript, or 
            any other language, you'll find comprehensive 
            tutorials with examples and explanations.
        </p>
    </div>
</body>

</html>

Prevent Text From Wrapping

This example shows how the text no-wrap class prevents it from wrapping within its container, causing it to overflow if it exceeds the specified width.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
    <p class="underline font-bold"> 
        Applying Text NoWrap
    </p>
    
    <div class="w-64 bg-gray-200 p-4">
        <p class="text-nowrap text-lg">
            This text will not wrap and will overflow 
            if it exceeds the width of its container.
        </p>
    </div>
</body>

</html>

Distribute Text Evenly Across Each Line

This example shows how the text-balance classes in Tailwind CSS are used to evenly distribute words across each line of text, creating a visually balanced text block.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
    <p class="underline font-bold"> 
        Applying Text Balance 
    </p>
    <div class="w-64 bg-gray-200 p-4">
        <p class="text-balance text-lg">
            This text is balanced to have a more even 
            distribution of words across each line.
        </p>
    </div>
</body>

</html>

Prevent Orphans Using Text Pretty Class

This example shows how Tailwind CSS uses text-pretty classes to avoid orphans (which are single words appearing alone on the last line of text) by adjusting line breaks to ensure no single word is left isolated on its own lines at the end of a paragraph.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
    <p class="underline font-bold"> 
        Applying Text Pretty
    </p>
 
    <div class="w-64 bg-gray-200 p-4">
        <p class="text-pretty text-lg">
            This text prevents orphans at the end of 
            paragraphs, ensuring no single word is 
            left on its own line.
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next