Text Behavior

Text Behavior in Tailwind CSS 📝

How Words Wrap, Break, and Behave

🎭 The Story of the Chatty Paragraph

Imagine you have a friend who talks a lot. Sometimes they talk so much that their words spill off the page! Today, we’ll learn how to teach our text to behave nicely — when to wrap to a new line, when to stay put, and how to line up properly.

Think of text like water flowing in a river. Sometimes we want it to flow freely, sometimes we need to build little dams to control where it goes!

1️⃣ Text Wrap Utilities

What’s Text Wrap?

When your sentence is too long for its container, what should happen?

Real Life Example: Imagine writing on a small sticky note. When you reach the edge, you have two choices:

• Start a new line (wrap)
• Keep going off the paper (no wrap)

The Classes

🎯 Simple Example

<!-- Text wraps normally -->
<p class="text-wrap">
  This is a very long sentence
  that will wrap to the next line.
</p>

<!-- Text stays on one line -->
<p class="text-nowrap">
  This stays on one line forever!
</p>

<!-- Balanced headlines look nice -->
<h1 class="text-balance">
  A Beautiful Headline That
  Balances Itself Perfectly
</h1>

💡 Pro Tip

Use text-balance for headlines so they look nice on all screen sizes!

2️⃣ Whitespace

What’s Whitespace?

Whitespace controls how your text handles spaces and line breaks.

Real Life Example: When you write a poem, you want each line to stay on its own line. When you write a paragraph, you want extra spaces to disappear.

The Classes

🎯 Simple Example

<!-- Normal: Extra spaces disappear -->
<p class="whitespace-normal">
  Hello    world!
</p>
<!-- Shows: "Hello world!" -->

<!-- Pre: Keep ALL spaces and breaks -->
<pre class="whitespace-pre">
  Hello    world!
  New line here
</pre>
<!-- Shows exactly as written! -->

<!-- Pre-line: Keep breaks, collapse spaces -->
<p class="whitespace-pre-line">
  Line one
  Line two
</p>

💡 When To Use Each

• normal → Regular paragraphs
• nowrap → Navigation menus
• pre → Code blocks
• pre-line → Poems, addresses
• pre-wrap → User-typed content

3️⃣ Word Break

What’s Word Break?

Sometimes a word is SO LONG it doesn’t fit! What do we do?

Real Life Example: Imagine the word “Supercalifragilisticexpialidocious” in a tiny box. Do we:

• Let it overflow?
• Break it in the middle?

The Classes

🎯 Simple Example

<!-- Normal: Long words overflow -->
<p class="break-normal">
  Pneumonoultramicroscopicsilicovolcanoconiosis
</p>

<!-- Words: Break long words -->
<p class="break-words">
  Pneumonoultramicroscopic...
  silicovolcanoconiosis
</p>

<!-- All: Break anywhere -->
<p class="break-all">
  This-breaks-anywhere-needed
</p>

💡 Most Useful

break-words is your friend for user content where people might paste long URLs!

4️⃣ Vertical Align

What’s Vertical Align?

When you have text and an icon side by side, how do they line up?

Real Life Example: Think of friends of different heights standing for a photo:

• Stand on tiptoes (top)
• Stand normally (middle)
• Crouch down (bottom)

The Classes

🎯 Simple Example

<!-- Icon with text -->
<span>Hello</span>
<img src="star.png" class="align-middle">
<span>World</span>

<!-- Subscript for formulas -->
<span>H</span>
<span class="align-sub text-sm">2</span>
<span>O</span>
<!-- Shows: H₂O -->

<!-- Superscript for powers -->
<span>E=mc</span>
<span class="align-super text-sm">2</span>
<!-- Shows: E=mc² -->

💡 Most Common Use

align-middle for icons next to text!

5️⃣ List Style Utilities

What’s List Style?

Lists can look different! Bullets, numbers, or nothing at all.

Real Life Example: Think of making a shopping list:

• Bullets (•) for general items
• Numbers (1, 2, 3) for steps
• Nothing for clean menus

List Style Type Classes

List Style Position Classes

🎯 Simple Example

<!-- Bullet list -->
<ul class="list-disc list-inside">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<!-- Numbered list -->
<ol class="list-decimal list-inside">
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>

<!-- Clean list (navigation) -->
<ul class="list-none">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

💡 Pro Tips

• Use list-none for navigation menus
• Use list-inside when space is tight
• Use list-decimal for step-by-step instructions

🎨 Visual Summary

graph TD
    A["Text Behavior"] --> B["Text Wrap"]
    A --> C["Whitespace"]
    A --> D["Word Break"]
    A --> E["Vertical Align"]
    A --> F["List Style"]

    B --> B1["wrap/nowrap"]
    B --> B2["balance/pretty"]

    C --> C1["normal/nowrap"]
    C --> C2["pre/pre-line/pre-wrap"]

    D --> D1["normal/words"]
    D --> D2["all/keep"]

    E --> E1["top/middle/bottom"]
    E --> E2["sub/super"]

    F --> F1["disc/decimal/none"]
    F --> F2["inside/outside"]

🚀 Quick Reference

Text Wrapping

<p class="text-wrap">Wraps normally</p>
<p class="text-nowrap">No wrapping</p>
<h1 class="text-balance">Balanced</h1>

Whitespace

<p class="whitespace-normal">Normal</p>
<pre class="whitespace-pre">Preserved</pre>

Word Break

<p class="break-words">Safe for URLs</p>

Vertical Align

<img class="align-middle"> <!-- With text -->

Lists

<ul class="list-disc list-inside">
  <li>Item</li>
</ul>

✨ You Did It!

Now you know how to control text behavior in Tailwind CSS:

1. Text Wrap — Control line wrapping
2. Whitespace — Handle spaces and breaks
3. Word Break — Break long words safely
4. Vertical Align — Line up text and icons
5. List Style — Style your lists beautifully

Your text will now behave exactly how you want it to! 🎉