CSS

🧵 CSS Tutorial: text-wrap

📌 Introduction

The text-wrap property in CSS controls how text should wrap inside an element. This is essential for responsive design, preventing long text from breaking layout, and ensuring paragraphs remain readable across different devices. Introduced as part of the **CSS Text Module Level 4**, text-wrap is a modern and improved way to manage text wrapping. ✨

🎯 Why Use text-wrap?

To prevent awkward text breaks in responsive layouts 📱
To ensure long words wrap correctly instead of overflowing 🔤
To maintain readability in paragraphs and UI labels 📖
To give designers better control than the older white-space hacks 🎨

✨ Syntax

Basic Syntax

selector {
  text-wrap: wrap | nowrap | balance | pretty;
}

Note

text-wrap is newer and more flexible than older properties likewhite-space and word-wrap.

🧩 Available Values

1. wrap (default)

Allows text to wrap normally at word boundaries. This is the default for most block elements like <p>.

2. nowrap 🚫

Prevents text from wrapping at all — the text will stay in one line and may overflow.

nowrap Example

.nowrap {
  text-wrap: nowrap;
}

3. balance ⚖️

Tries to balance text across lines for aesthetic layout, especially for headings. Great for hero sections or multi-line titles.

balance Example

h1 {
  text-wrap: balance;
}

4. pretty 💅

Tries to avoid “ugly” breaks by giving lines a more natural and smooth wrap. Ideal for long paragraphs and blog content.

pretty Example

p {
  text-wrap: pretty;
}

🔥 Practical Examples

1. Prevent Wrapping for Labels

Label Example

.label {
  text-wrap: nowrap;
  background: #eee;
  padding: 5px 10px;
}

2. Balanced Headings

Balanced Heading

h2 {
  text-wrap: balance;
  font-size: 2rem;
  max-width: 400px;
}

3. Pretty Wrapping for Articles

Pretty Paragraph

article p {
  text-wrap: pretty;
  line-height: 1.6;
}

📊 Comparison Table

Value	Effect
wrap	Normal wrapping at word boundaries
nowrap	No wrapping; content stays in a single line
balance	Evenly balances text across lines
pretty	Makes wrapping aesthetically pleasing

🖼️ Visual Example

Further details can be found at: https://dummyimage.com/900x260/eeeeee/000000&text=text-wrap+demo

>>“Beautiful text isn’t just about fonts — it’s about how words flow on the page.” ✨

🎉 Conclusion

The text-wrap property is a modern and flexible way to control text wrapping in CSS. Whether you’re designing responsive headings, clean paragraphs, or UI labels, this property ensures your text flows naturally across different devices. Start using text-wrap to make your text more readable, elegant, and visually balanced! 🚀