📌 Introduction

The word-break property in CSS controls how words should break when they reach the end of a line. It is especially useful for handling long words, URLs, user-generated text, or multilingual content that doesn't naturally break. Properly using word-break keeps your layouts clean and prevents text overflow issues. ✨

🎯 Why Use word-break?

✨ Syntax

selector {
  word-break: normal | break-all | keep-all | break-word;
}

🧩 Available Values

1. normal (default)

Uses default line-breaking rules. Long words may overflow if they cannot break naturally.

2. break-all 🔨

Breaks words at arbitrary points if necessary. Good for handling extremely long words or strings without spaces.

.break-all {
  word-break: break-all;
}

3. keep-all 📏

Prevents word breaks in languages using normal spacing (like Chinese, Japanese, Korean). Does not apply to languages using Latin script (English).

.keep-all {
  word-break: keep-all;
}

4. break-word (legacy but useful) 📝

Breaks words only when absolutely necessary. Works as a fallback for older browsers. Equivalent to overflow-wrap: break-word.

.break-word {
  word-break: break-word; /* legacy */
}

🔥 Practical Examples

1. Prevent Layout Breaking Due to Long URLs

.url {
  width: 200px;
  border: 1px solid #ccc;
  word-break: break-all;
}

2. Maintain Clean Text in Articles (Use Normal)

article p {
  word-break: normal;
}

3. Handling Multilingual CJK Content

.cjk {
  word-break: keep-all;
}

4. Prevent Overflow in Narrow UI Boxes

.narrow {
  width: 120px;
  word-break: break-word;
}

📊 Comparison Table

🖼️ Visual Example

🎉 Conclusion

The word-break property is essential when dealing with long words, responsive layouts, and multilingual content. Use break-all for forcing breaks, keep-all for CJK text, and normal for typical content. Pair it with overflow-wrap and white-space for complete control over text layout! 🚀