🌐 What Is line-break?

The line-break property controls how text wraps in languages that use **East Asian scripts** (Chinese, Japanese, Korean — CJK). It defines how strictly the browser should follow line-breaking rules and how it handles punctuation, symbols, and special characters.

📦 Syntax

line-break: auto | loose | normal | strict | anywhere;

📌 1. Default Behavior (auto)

p {
  line-break: auto;
}

Browser follows typical line-breaking rules for the language detected.

📌 2. Allow Looser Line Breaks

p {
  line-break: loose;
}

Adds more break opportunities — useful when dealing with narrow columns of CJK text.

📌 3. Use Standard Line Break Rules

p {
  line-break: normal;
}

A balanced option between strict and loose rules.

📌 4. Apply Strict Japanese/Chinese Line Breaking

p {
  line-break: strict;
}

Prevents breaks before characters like:!”, ? . ] ) } 、 。Improves professional typesetting in Japanese/Chinese documents.

📌 5. Break Text Anywhere (Even Inside Words)

p {
  line-break: anywhere;
}

Break text even when rules normally forbid it. Useful for long URLs, file paths, or technical strings that overflow.

🧪 Real-World Use Cases

1️⃣ Japanese Newspaper Layout

.jp-text {
  line-break: strict;
}

Ensures correct and readable Japanese line-breaking.

2️⃣ CJK Text in Very Narrow Mobile Layouts

.mobile-text {
  line-break: loose;
}

3️⃣ Prevent Overflow of Code Snippets or URLs

.url {
  line-break: anywhere;
  word-break: break-all;
}

Prevents long URLs or strings from causing horizontal scroll.

📚 Related Properties

⚠️ Common Mistakes

🔥 Summary

The line-break property gives deep control over line-wrapping behavior, specifically for CJK languages. Use strict rules for professional typesetting and looser or anywhere rules for responsive, compact, or constrained layouts.

Learn more →MDN Docs 📘