📌 Introduction

The overflow-wrap property in CSS controls whether the browser should break long words when they exceed the width of their container. It is essential for handling user-generated content, long URLs, filenames, and responsive UI elements. Without it, long words may overflow and break your layout. 😬 Using overflow-wrap keeps your UI clean and readable. ✨

🎯 Why Use overflow-wrap?

✨ Syntax

selector {
  overflow-wrap: normal | break-word | anywhere;
}

🧩 Available Values

1. normal (default)

Words will only break at normal break points (spaces, hyphens). Long words may overflow if there’s no natural breaking point.

2. break-word (most common) ⭐

Forces long words to wrap when needed — prevents overflow but breaks only when necessary. This is the safest and most widely used option.

.text {
  overflow-wrap: break-word;
}

3. anywhere 🧨 (Modern)

Allows breaking at any point, even if it produces awkward breaks. More aggressive than break-word, similar to word-break: break-all but safer.

.force-break {
  overflow-wrap: anywhere;
}

🔥 Practical Examples

1. Prevent Layout Break with long URLs

.url-box {
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
  overflow-wrap: break-word;
}

2. Chat Messages or User Comments

.chat-message {
  max-width: 250px;
  overflow-wrap: break-word;
  background: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
}

3. Aggressive Wrapping for Responsive UI

.tag {
  overflow-wrap: anywhere;
  padding: 4px 8px;
  background: #eaeaea;
}

📊 Comparison Table

🖼️ Visual Example

🎉 Conclusion

The overflow-wrap property is essential for maintaining clean, readable, and responsive layouts. Use break-word for safe, common scenarios, and anywhere for extreme overflow prevention. Pair it with word-break and white-space for full text control. 🚀