Text Alignment & Wrapping in Tailwind CSS
From the Tailwind CSS cheat sheet · Typography · verified Jul 2026
Text Alignment & Wrapping
Align text and control overflow behavior.
html
<!-- Alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>
<!-- Wrapping & overflow -->
<p class="truncate">Truncate with ellipsis...</p>
<p class="text-wrap">Normal wrapping</p>
<p class="text-nowrap">No wrapping</p>
<p class="text-balance">Balanced line breaks</p>
<p class="break-words">Break long words</p>💡 truncate is a shorthand that combines overflow-hidden + text-ellipsis + whitespace-nowrap
⚡ text-balance creates even line lengths — ideal for headings
📌 text-pretty avoids orphaned single words on the last line of paragraphs
🟢 Use text-start/text-end instead of text-left/text-right for RTL language support
alignmentwrappingtruncate
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.