Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
text-wrapHow text wraps
word-breakBreak long words
hyphensAdd hyphens
Default text wrapping behavior
text-wrap: wrap;Text stays on one line
text-wrap: nowrap;Balances line lengths in headings
text-wrap: balance;Avoids orphans and widows in paragraphs
text-wrap: pretty;text-wrap: balance for headings, text-wrap: pretty for paragraphs!<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1 style="text-align: center; color: #667eea; margin-bottom: 40px;">
Text Wrapping Comparison
</h1>
<div class="comparison">
<div class="box">
<span class="label">❌ Normal Wrap</span>
<h1 class="normal">
This is a Long Heading That Might Break Awkwardly
</h1>
</div>
<div class="box">
<span class="label">✅ text-wrap: balance</span>
<h1 class="balanced">
This is a Long Heading That Might Break Awkwardly
</h1>
</div>
</div>
<div class="comparison">
<div class="box">
<span class="label">❌ Normal Paragraph</span>
<p>
This is a paragraph with some text that demonstrates how normal wrapping works.
Sometimes the last word might end up all alone on the last line, which looks awkward.
This is called an orphan.
</p>
</div>
<div class="box">
<span class="label">✅ text-wrap: pretty</span>
<p class="pretty">
This is a paragraph with some text that demonstrates how normal wrapping works.
Sometimes the last word might end up all alone on the last line, which looks awkward.
This is called an orphan.
</p>
</div>
</div>
</div>
</body>
</html>Loading preview...
normalDefault word breaking
break-allBreak anywhere in word
keep-allNever break words
break-wordBreak only if needed
p {
hyphens: auto;
/* Requires lang attribute! */
}
<p lang="en">Very long words...</p>noneNo hyphenation
manualOnly at ­ or ‐
autoBrowser decides (needs lang)