|

CSS 11 💻 line break and word break properties

Bykronos

These CSS properties control how text breaks across lines, making them essential for handling long words, URLs, or content in narrow containers.

Overview of Properties

PropertyDescriptionCommon Values
line-breakControls line-breaking behaviorauto, normal, loose, strict, anywhere
word-breakControls word-breaking behaviornormal, break-all, keep-all

1. line-break

The line-break property specifies how line breaks should be handled, particularly for CJK (Chinese, Japanese, Korean) text and punctuation.

p.line-break-auto {
    line-break: auto; /* Uses the default break rule */
}

p.line-break-normal {
    line-break: normal; /* Uses the most common break rule */
}

p.line-break-anywhere {
    line-break: anywhere; /* Breaks at any point in the text block */
}

p.line-break-loose {
    line-break: loose; /* Uses the least restrictive rule */
}

p.line-break-strict {
    line-break: strict; /* Uses the most stringent rule */
}

Values

ValueDescriptionExample
autoUses the default break rule (browser default)line-break: auto;
normalUses the most common break ruleline-break: normal;
looseUses the least restrictive ruleline-break: loose;
strictUses the most stringent ruleline-break: strict;
anywhereAllows line breaks at any point in the text blockline-break: anywhere;

2. word-break

The word-break property controls how words break when they reach the end of a line.

p.word-break-normal {
    word-break: normal; /* Default — breaks only at whitespace */
}

p.word-break-break-all {
    word-break: break-all; /* Breaks at any point in the text block */
}

p.word-break-keep-all {
    word-break: keep-all; /* Breaks only at whitespace, not in the middle */
}

Values

ValueDescriptionExample
normalDefault — words break only at whitespace charactersword-break: normal;
break-allWords can break at any point, even in the middle of a wordword-break: break-all;
keep-allWords break only at whitespace characters (not in the middle)word-break: keep-all;

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-break and word-break Properties</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 2px solid #ddd;
            background: #f8f9fa;
            max-width: 400px;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== LINE BREAK DEMOS ====== */
        .lb-auto {
            line-break: auto;
        }

        .lb-normal {
            line-break: normal;
        }

        .lb-loose {
            line-break: loose;
        }

        .lb-strict {
            line-break: strict;
        }

        .lb-anywhere {
            line-break: anywhere;
        }

        /* ====== WORD BREAK DEMOS ====== */
        .wb-normal {
            word-break: normal;
        }

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

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

        .note {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <h1>line-break and word-break Properties</h1>

    <!-- ====== 1. LINE BREAK ====== -->
    <section>
        <h2>1. line-break</h2>

        <p style="margin-bottom: 5px;">These examples are displayed in a container with <strong>max-width: 400px</strong> to show how line breaks behave.</p>

        <div class="grid-2">
            <div class="demo-box lb-auto">
                <strong>line-break: auto (default)</strong><br>
                This is a very long sentence without any specified line breaks. By default, the browser will break the word at spaces or punctuation marks to fit within the container width.
            </div>

            <div class="demo-box lb-normal">
                <strong>line-break: normal</strong><br>
                This is a very long sentence with irregular words and symbols like "--" and "-". By setting the <code>line-break: normal;</code> property, we can allow line breaks between words or within a word. However, it may not work as expected in all browsers.
            </div>

            <div class="demo-box lb-loose">
                <strong>line-break: loose</strong><br>
                This is a very long sentence with irregular words and symbols like "--" and "-". Using the least restrictive rule allows more flexible line breaks, especially for CJK text.
            </div>

            <div class="demo-box lb-strict">
                <strong>line-break: strict</strong><br>
                This is a very long sentence with irregular words and symbols like "--" and "-". Using the most stringent rule restricts line breaks, maintaining stricter formatting for CJK text.
            </div>

            <div class="demo-box lb-anywhere">
                <strong>line-break: anywhere</strong><br>
                This is a very long sentence without any spaces or punctuation marks and no line breaks are allowed. Setting <code>line-break: anywhere;</code> will allow line breaks at any point in the text block, but it may not work as expected in some browsers.
            </div>
        </div>

        <div class="code-block">
            line-break: auto;     /* Uses the default break rule */
            line-break: normal;   /* Uses the most common break rule */
            line-break: loose;    /* Uses the least restrictive rule */
            line-break: strict;   /* Uses the most stringent rule */
            line-break: anywhere; /* Allows line breaks at any point */
        </div>
    </section>

    <!-- ====== 2. WORD BREAK ====== -->
    <section>
        <h2>2. word-break</h2>

        <p style="margin-bottom: 5px;">These examples are displayed in a container with <strong>max-width: 400px</strong> to show how word breaks behave.</p>

        <div class="grid-2">
            <div class="demo-box wb-normal">
                <strong>word-break: normal (default)</strong><br>
                This is a very long sentence without any specified word breaks. By default, the browser will break the word at whitespace characters to fit within the container width.
            </div>

            <div class="demo-box wb-break-all">
                <strong>word-break: break-all</strong><br>
                This is a very long sentence with irregular words and symbols like "--" and "-". By setting the <code>word-break: break-all;</code> property, we can force words to break at any point in the text block, even in the middle of a word.
            </div>

            <div class="demo-box wb-keep-all">
                <strong>word-break: keep-all</strong><br>
                This is a very long sentence without any spaces or punctuation marks and no word breaks are allowed. Setting <code>word-break: keep-all;</code> will prevent words from breaking in the middle of a word.
            </div>
        </div>

        <div class="code-block">
            word-break: normal;     /* Default — breaks only at whitespace */
            word-break: break-all;  /* Words can break at any point */
            word-break: keep-all;   /* Words break only at whitespace */
        </div>
    </section>

    <!-- ====== 3. COMPARISON: line-break vs word-break ====== -->
    <section>
        <h2>3. Comparison: line-break vs word-break</h2>

        <div class="grid-2">
            <div class="demo-box" style="max-width: 400px;">
                <strong>line-break: anywhere</strong>
                <p style="line-break: anywhere; border: 1px solid #ddd; padding: 10px; border-radius: 4px; margin-top: 5px;">
                    This very long string of text with no spaces will break at any point because of line-break: anywhere.
                </p>
                <p class="note">Breaks at any point in the text block</p>
            </div>

            <div class="demo-box" style="max-width: 400px;">
                <strong>word-break: break-all</strong>
                <p style="word-break: break-all; border: 1px solid #ddd; padding: 10px; border-radius: 4px; margin-top: 5px;">
                    This very long string of text with no spaces will break at any point because of word-break: break-all.
                </p>
                <p class="note">Breaks words at any point</p>
            </div>
        </div>

        <div class="code-block">
            /* line-break affects line break behavior for punctuation and CJK */
            line-break: anywhere;

            /* word-break affects how words break within a line */
            word-break: break-all;
        </div>
    </section>

    <!-- ====== 4. REFERENCE TABLES ====== -->
    <section>
        <h2>4. Reference Tables</h2>

        <h3>line-break Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>auto</code></td>
                <td>Uses the default break rule (browser default)</td>
                <td><code>line-break: auto;</code></td>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Uses the most common break rule</td>
                <td><code>line-break: normal;</code></td>
            </tr>
            <tr>
                <td><code>loose</code></td>
                <td>Uses the least restrictive rule</td>
                <td><code>line-break: loose;</code></td>
            </tr>
            <tr>
                <td><code>strict</code></td>
                <td>Uses the most stringent rule</td>
                <td><code>line-break: strict;</code></td>
            </tr>
            <tr>
                <td><code>anywhere</code></td>
                <td>Allows line breaks at any point in the text block</td>
                <td><code>line-break: anywhere;</code></td>
            </tr>
        </table>

        <h3>word-break Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Default — words break only at whitespace characters</td>
                <td><code>word-break: normal;</code></td>
            </tr>
            <tr>
                <td><code>break-all</code></td>
                <td>Words can break at any point, even in the middle of a word</td>
                <td><code>word-break: break-all;</code></td>
            </tr>
            <tr>
                <td><code>keep-all</code></td>
                <td>Words break only at whitespace characters (not in the middle)</td>
                <td><code>word-break: keep-all;</code></td>
            </tr>
        </table>
    </section>

</body>
</html>

Quick Reference

PropertyDescriptionCommon Values
line-breakControls line-breaking behaviorauto, normal, loose, strict, anywhere
word-breakControls word-breaking behaviornormal, break-all, keep-all

line-break vs word-break — When to Use Which

PropertyBest ForExample Use Case
line-breakControlling line breaks with punctuation and CJK textInternational websites with Chinese/Japanese/Korean content
word-break: break-allHandling long words or URLs in narrow containersCode blocks, URLs, user-generated content
word-break: keep-allPreventing mid-word breaksBrand names, proper nouns, headlines

Best Practices

✅ Do This:

/* Handle long URLs in narrow containers */
.url {
    word-break: break-all;
}

/* Keep brand names intact */
.brand-name {
    word-break: keep-all;
}

/* For CJK text, use line-break */
.chinese-text {
    line-break: strict;
}

❌ Don’t Do This:

/* Don't use break-all on body text */
body {
    word-break: break-all;  /* Makes text hard to read */
}

/* Don't use word-break when overflow-wrap is more appropriate */
/* Use overflow-wrap: break-word instead for better readability */

Pro Tip: Use word-break: break-all for code blocks, URLs, or user-generated content where long words might overflow. Use word-break: keep-all to preserve brand names and proper nouns. For general text, word-break: normal (the default) is usually the best choice. If you need to break long words, overflow-wrap: break-word often provides better readability than word-break: break-all!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!