CSS 10 💻 white space, text emphasis and text shadow properties - KandZ

These CSS properties control the handling of whitespace, add emphasis marks to text, and create shadow effects for enhanced typography.

Overview of Properties

Property	Description	Common Values
`white-space`	Controls whitespace handling and wrapping	`normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`
`text-emphasis`	Adds emphasis marks (shorthand for style + color)	`fill`, `before "•"`, `filled double-circle #ffb703`
`text-shadow`	Adds shadow effects to text	`2px 2px 4px rgba(0,0,0,0.5)`

1. white-space

The white-space property controls how whitespace characters (spaces, tabs, newlines) are handled within an element.

p.normal-white-space {
    white-space: normal; /* Default — wraps text, collapses spaces */
}

p.nowrap-white-space {
    white-space: nowrap; /* Prevents wrapping, collapses spaces */
}

p.pre-white-space {
    white-space: pre; /* Preserves spaces and line breaks, no wrapping */
}

p.preline-white-space {
    white-space: pre-line; /* Collapses spaces, preserves line breaks, wraps */
}

p.pre-wrap-white-space {
    white-space: pre-wrap; /* Preserves spaces and line breaks, wraps */
}

Values

Value	Spaces	Line Breaks	Wrapping	Example
`normal`	Collapses	Collapses	Wraps	Default behavior
`nowrap`	Collapses	Collapses	No wrap	Single line text
`pre`	Preserves	Preserves	No wrap	Like `<pre>` tag
`pre-wrap`	Preserves	Preserves	Wraps	Code with line wrapping
`pre-line`	Collapses	Preserves	Wraps	Poetry or formatted text

2. text-emphasis

The text-emphasis property adds emphasis marks (dots, circles, symbols) to text. It’s a shorthand for text-emphasis-style and text-emphasis-color.

p.fill-emphasis {
    text-emphasis: fill; /* Default — filled dot emphasis */
}

p.before-emphasis {
    text-emphasis: before "•"; /* Mark placed before each word */
}

p.after-emphasis {
    text-emphasis: after "•"; /* Mark placed after each word */
}

p.emphasis-combined {
    text-emphasis: filled double-circle #ffb703; /* Style + color */
}

Syntax

text-emphasis: <style> [ <color> ] | before | after <string>

Values

Value	Description	Example
`filled`	Filled dot (default)	`text-emphasis: filled;`
`open`	Open dot	`text-emphasis: open;`
`filled sesame`	Filled sesame shape	`text-emphasis: filled sesame;`
`open sesame`	Open sesame shape	`text-emphasis: open sesame;`
`before`	Places mark before the text	`text-emphasis: before "•";`
`after`	Places mark after the text	`text-emphasis: after "•";`
`string`	Custom symbol	`text-emphasis: "★"`
`color`	Sets the color	`text-emphasis: filled #ff6b6b;`

3. text-shadow

The text-shadow property adds shadow effects to text. It accepts a comma-separated list of shadows.

p.default-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

p.custom-shadow {
    text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.3), 
                 2px 2px 6px rgba(255, 255, 255, 0.7);
}

p.simple-shadow {
    text-shadow: 3px 6px; /* Uses default color and blur radius */
}

p.colored-shadow {
    text-shadow: blue 3px 6px; /* Sets color and offsets */
}

Syntax

text-shadow: <offset-x> <offset-y> <blur-radius> <color> | none

Values

Value	Description	Example
`offset-x`	Horizontal shadow offset	`2px`, `-2px`
`offset-y`	Vertical shadow offset	`2px`, `-2px`
`blur-radius`	Blur radius (optional)	`4px`
`color`	Shadow color (optional)	`rgba(0,0,0,0.5)`
`none`	No shadow	`text-shadow: none;`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>white-space, text-emphasis, text-shadow</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            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;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 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;
        }

        /* ====== WHITE SPACE DEMOS ====== */
        .ws-normal {
            white-space: normal;
        }

        .ws-nowrap {
            white-space: nowrap;
        }

        .ws-pre {
            white-space: pre;
        }

        .ws-pre-line {
            white-space: pre-line;
        }

        .ws-pre-wrap {
            white-space: pre-wrap;
        }

        /* ====== TEXT EMPHASIS DEMOS ====== */
        .te-fill {
            text-emphasis: fill;
        }

        .te-open {
            text-emphasis: open;
        }

        .te-sesame {
            text-emphasis: filled sesame;
        }

        .te-before {
            text-emphasis: before "•";
        }

        .te-after {
            text-emphasis: after "•";
        }

        .te-star {
            text-emphasis: "★";
        }

        .te-combined {
            text-emphasis: filled double-circle #ffb703;
        }

        /* ====== TEXT SHADOW DEMOS ====== */
        .ts-default {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .ts-custom {
            text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.3), 
                         2px 2px 6px rgba(255, 255, 255, 0.7);
        }

        .ts-heavy {
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 
                         0 0 20px rgba(0, 0, 0, 0.2);
        }

        .ts-glow {
            text-shadow: 0 0 10px #007bff, 0 0 20px #007bff;
        }

        .ts-multiple {
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3),
                         2px 2px 4px rgba(0, 0, 0, 0.2),
                         3px 3px 6px rgba(0, 0, 0, 0.1);
        }

        .ts-neon {
            text-shadow: 0 0 5px #ff6b6b, 
                         0 0 15px #ff6b6b, 
                         0 0 30px #ff6b6b;
        }
    </style>
</head>
<body>

    <h1>white-space, text-emphasis, text-shadow</h1>

    <!-- ====== 1. WHITE SPACE ====== -->
    <section>
        <h2>1. white-space</h2>

        <div class="demo-box ws-normal">
            <strong>white-space: normal (default)</strong><br>
            This is some normal text with a bunch of spaces and words. Spaces are collapsed, and text wraps when needed.
        </div>

        <div class="demo-box ws-nowrap">
            <strong>white-space: nowrap</strong><br>
            This is some nowrap text, but the spaces are not preserved or wrapped. The text stays on a single line, and you can scroll to see the full content.
        </div>

        <div class="demo-box ws-pre">
            <strong>white-space: pre</strong><br>
            This is pre text,   which preserves both spaces and line breaks,
            but it doesn't wrap the text. Everything stays as written.
        </div>

        <div class="demo-box ws-pre-line">
            <strong>white-space: pre-line</strong><br>
            This is pre-line text, which preserves line breaks and wraps lines at word boundaries.
            Multiple spaces are collapsed into a single space. This is useful for poetry or formatted text.
        </div>

        <div class="demo-box ws-pre-wrap">
            <strong>white-space: pre-wrap</strong><br>
            This is pre-wrap text, which preserves both spaces and line breaks, and also wraps the text when needed.
            It combines the best of both pre and normal.
        </div>

        <div class="code-block">
            white-space: normal;     /* Default — wraps text, collapses spaces */
            white-space: nowrap;     /* Prevents wrapping, collapses spaces */
            white-space: pre;        /* Preserves spaces and line breaks, no wrapping */
            white-space: pre-line;   /* Collapses spaces, preserves line breaks, wraps */
            white-space: pre-wrap;   /* Preserves spaces and line breaks, wraps */
        </div>
    </section>

    <!-- ====== 2. TEXT EMPHASIS ====== -->
    <section>
        <h2>2. text-emphasis</h2>

        <div class="grid-2">
            <div class="demo-box te-fill">
                <strong>text-emphasis: fill</strong><br>
                This is some fill emphasis text with the default filled dot emphasis mark.
            </div>

            <div class="demo-box te-open">
                <strong>text-emphasis: open</strong><br>
                This is some open emphasis text with an open dot emphasis mark.
            </div>

            <div class="demo-box te-sesame">
                <strong>text-emphasis: filled sesame</strong><br>
                This is some sesame emphasis text with filled sesame marks.
            </div>

            <div class="demo-box te-before">
                <strong>text-emphasis: before "•"</strong><br>
                This is some before emphasis text with a bullet mark placed before each word.
            </div>

            <div class="demo-box te-after">
                <strong>text-emphasis: after "•"</strong><br>
                This is some after emphasis text with a bullet mark placed after each word.
            </div>

            <div class="demo-box te-star">
                <strong>text-emphasis: "★"</strong><br>
                This is some star emphasis text with a custom star symbol.
            </div>

            <div class="demo-box te-combined">
                <strong>text-emphasis: filled double-circle #ffb703</strong><br>
                This is some combined emphasis text with a filled double-circle style and custom color.
            </div>
        </div>

        <div class="code-block">
            text-emphasis: fill;                           /* Filled dot (default) */
            text-emphasis: open;                           /* Open dot */
            text-emphasis: filled sesame;                 /* Filled sesame marks */
            text-emphasis: before "•";                    /* Mark before each word */
            text-emphasis: after "•";                     /* Mark after each word */
            text-emphasis: "★";                           /* Custom symbol */
            text-emphasis: filled double-circle #ffb703;  /* Style + color */
        </div>
    </section>

    <!-- ====== 3. TEXT SHADOW ====== -->
    <section>
        <h2>3. text-shadow</h2>

        <div class="grid-2">
            <div class="demo-box ts-default" style="font-size: 1.2rem; font-weight: bold;">
                <strong>text-shadow: 2px 2px 4px rgba(0,0,0,0.5)</strong><br>
                Default shadow effect
            </div>

            <div class="demo-box ts-custom" style="font-size: 1.2rem; font-weight: bold;">
                <strong>text-shadow: -2px -2px 4px rgba(0,0,0,0.3), 2px 2px 6px rgba(255,255,255,0.7)</strong><br>
                Custom shadow with depth
            </div>

            <div class="demo-box ts-heavy" style="font-size: 1.2rem; font-weight: bold;">
                <strong>text-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.2)</strong><br>
                Heavy soft shadow
            </div>

            <div class="demo-box ts-glow" style="font-size: 1.2rem; font-weight: bold; color: #007bff;">
                <strong>text-shadow: 0 0 10px #007bff, 0 0 20px #007bff</strong><br>
                Glowing effect
            </div>

            <div class="demo-box ts-multiple" style="font-size: 1.2rem; font-weight: bold;">
                <strong>Multiple Shadows</strong><br>
                Three shadows for layered depth
            </div>

            <div class="demo-box ts-neon" style="font-size: 1.2rem; font-weight: bold; color: #ff6b6b;">
                <strong>text-shadow: 0 0 5px #ff6b6b, 0 0 15px #ff6b6b, 0 0 30px #ff6b6b</strong><br>
                Neon glow effect
            </div>
        </div>

        <div class="code-block">
            /* Basic shadow */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

            /* Multiple shadows */
            text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.3),
                         2px 2px 6px rgba(255, 255, 255, 0.7);

            /* Glow effect */
            text-shadow: 0 0 10px #007bff, 0 0 20px #007bff;

            /* Neon effect */
            text-shadow: 0 0 5px #ff6b6b, 0 0 15px #ff6b6b, 0 0 30px #ff6b6b;
        </div>
    </section>

    <!-- ====== 4. COMBINED EXAMPLES ====== -->
    <section>
        <h2>4. Combined Examples</h2>

        <div class="demo-box" style="white-space: pre-wrap; text-emphasis: before "★"; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
            <strong>Combined: pre-wrap + text-emphasis + text-shadow</strong><br>
            This text combines multiple properties: white-space: pre-wrap,
            text-emphasis: before "★", and a subtle text shadow.
            All working together for a unique style.
        </div>

        <div class="demo-box" style="white-space: nowrap; text-emphasis: after "•"; text-shadow: 0 0 10px rgba(0,123,255,0.3); font-size: 1.1rem;">
            <strong>Combined: nowrap + after emphasis + glow</strong><br>
            This text is nowrap with a subtle glow and emphasis marks after each word.
        </div>
    </section>

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

        <h3>white-space Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Spaces</th>
                <th>Line Breaks</th>
                <th>Wrapping</th>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Collapses</td>
                <td>Collapses</td>
                <td>Wraps</td>
            </tr>
            <tr>
                <td><code>nowrap</code></td>
                <td>Collapses</td>
                <td>Collapses</td>
                <td>No wrap</td>
            </tr>
            <tr>
                <td><code>pre</code></td>
                <td>Preserves</td>
                <td>Preserves</td>
                <td>No wrap</td>
            </tr>
            <tr>
                <td><code>pre-wrap</code></td>
                <td>Preserves</td>
                <td>Preserves</td>
                <td>Wraps</td>
            </tr>
            <tr>
                <td><code>pre-line</code></td>
                <td>Collapses</td>
                <td>Preserves</td>
                <td>Wraps</td>
            </tr>
        </table>

        <h3>text-emphasis Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>fill</code></td>
                <td>Filled dot (default)</td>
                <td><code>text-emphasis: fill;</code></td>
            </tr>
            <tr>
                <td><code>open</code></td>
                <td>Open dot</td>
                <td><code>text-emphasis: open;</code></td>
            </tr>
            <tr>
                <td><code>filled sesame</code></td>
                <td>Filled sesame shape</td>
                <td><code>text-emphasis: filled sesame;</code></td>
            </tr>
            <tr>
                <td><code>before "•"</code></td>
                <td>Mark before each word</td>
                <td><code>text-emphasis: before "•";</code></td>
            </tr>
            <tr>
                <td><code>after "•"</code></td>
                <td>Mark after each word</td>
                <td><code>text-emphasis: after "•";</code></td>
            </tr>
            <tr>
                <td><code>"string"</code></td>
                <td>Custom symbol</td>
                <td><code>text-emphasis: "★";</code></td>
            </tr>
        </table>

        <h3>text-shadow Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>offset-x offset-y blur-radius color</code></td>
                <td>Basic shadow</td>
                <td><code>text-shadow: 2px 2px 4px rgba(0,0,0,0.5);</code></td>
            </tr>
            <tr>
                <td><code>offset-x offset-y</code></td>
                <td>No blur, default color</td>
                <td><code>text-shadow: 3px 6px;</code></td>
            </tr>
            <tr>
                <td><code>color offset-x offset-y</code></td>
                <td>Color with offsets</td>
                <td><code>text-shadow: blue 3px 6px;</code></td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>No shadow</td>
                <td><code>text-shadow: none;</code></td>
            </tr>
        </table>
    </section>

</body>
</html>

Quick Reference

Property	Description	Common Values
`white-space`	Controls whitespace handling	`normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`
`text-emphasis`	Adds emphasis marks	`fill`, `before "•"`, `filled double-circle #ffb703`
`text-shadow`	Adds shadow effects	`2px 2px 4px rgba(0,0,0,0.5)`

Best Practices

✅ Do This:

/* Use white-space: pre for code blocks */
.code-block {
    white-space: pre-wrap;
}

/* Use text-shadow for headings and emphasis */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Use text-emphasis for annotations */
.highlight {
    text-emphasis: before "★";
}

/* Use multiple text-shadows for depth */
.text-depth {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3),
                 2px 2px 4px rgba(0,0,0,0.2);
}

❌ Don’t Do This:

/* Don't use nowrap for long paragraphs */
p { white-space: nowrap; }  /* May overflow the container */

/* Don't use text-shadow on large blocks of text */
p { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }  /* Can strain readability */

/* Don't overuse text-emphasis on long text */
p { text-emphasis: before "•"; }  /* Can be visually overwhelming */

Pro Tip: Use white-space: pre-wrap for code blocks to preserve formatting while allowing wrapping. Use text-shadow sparingly for headings, logos, or emphasis — too much shadow can hurt readability. text-emphasis is great for marking important words in educational or annotation contexts!

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!

Overview of Properties

1. white-space

Values

2. text-emphasis

Syntax

Values

3. text-shadow

Syntax

Values

Complete Example

Quick Reference

Best Practices

Ads Blocker Detected!!!