📜 CSS word-wrap — Control How Long Words Break and Wrap

The word-wrap property controls whether long words can be broken and wrapped onto the next line to prevent overflow. It helps maintain clean layouts when dealing with unbreakable strings like URLs or long words.

---

🔹 What Does word-wrap Do?

• Allows or prevents breaking long words to fit inside their container.
• Prevents horizontal scrollbars caused by long unbreakable words.
• Helps keep your layout tidy and readable.

---

📘 Syntax

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

---

✅ Values Explained

Value	Description
normal	Default. Words break only at allowed break points (spaces, hyphens).
break-word	Allows long words to break and wrap onto the next line to avoid overflow.

Note: word-wrap is an older property and is now an alias for the newer overflow-wrap property, which has the same behavior and better CSS spec support.

---

✍️ Example

1. Without Word Wrap (default)

p {
  word-wrap: normal;
}

Long words or URLs may overflow their container, causing horizontal scrolling.

---

2. With Word Wrap Enabled

p {
  word-wrap: break-word;
}

Long words will break and wrap onto the next line, preventing overflow.

---

🖼️ Image Idea: Word Wrap Comparison

Show a container with a very long word or URL:

• With normal: text overflows container boundaries.
• With break-word: text breaks and wraps inside container.

---

💡 Use Cases

• Wrapping long URLs or strings in responsive layouts.
• Preventing horizontal scrolling on small screens.
• Enhancing readability of unstructured text inputs.

---

✅ Summary

Property	word-wrap
Purpose	Control breaking and wrapping of long words
Default value	normal
Common value	break-word (allows breaking to avoid overflow)
Modern alias	Use overflow-wrap for better spec support

---