KandZ – Tuts

We like to help…!

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

white-space → specifies how spaces, tabs and newlines are handled
values: normal, nowrap, pre, pre-wrap, pre-line, break-spaces
example 1 → This is the default behavior, it wraps text and maintains spaces 
example 2 → this prevents wrapping of text and collapses all consecutive...
whitespace characters into a single space 
example 3 → This preserves both spaces and line breaks, but it doesn't wrap the text 
example 4 → this preserves spaces and collapses consecutive whitespace characters into a single space...
and wraps lines at word boundaries 

text-emphasis applies emphasis to the text with marks
it is a shorthand for text-emphasis style and text-empasis-color
values → filled, open, filled sesame, open sesame, strings and color
example 1 → this adds a fill style for the emphasized text (default)
example 2 → This adds an emphasis mark before each word
example 3 → this adds an emphasis mark after each word
example 4 → a shorthand for text-emphasis style and text-empasis-color

text-shadow adds shadow effects around the text
syntax → text-shadow: offset-x | offset-y | blur-radius | color 
it accepts comma-separated list of shadows
example 1 → this adds a default shadow effect around the text
example 2 → This adds a custom shadow effect with two horizontal and vertical offsets
text-shadow: 3px 6px → uses the default color and blur radius
text-shadow: blue 3px 6px → sets the color and the x/y offsets

10 – white-space, text-emphasis and text-shadow properties

<p class="normal-white-space">This is some normal text with a bunch of spaces and words.</p>
<p class="nowrap-white-space">This is Some nowrap text, but the spaces are not preserved or wrapped.</p>
<p class="pre-white-space">This is pre text, which preserves both spaces and line breaks, but it doesn't wrap the text.</p>
<p class="preline-white-space">This is preline text, which preserves spaces and collapses consecutive whitespace characters into a single space, and wraps lines at word boundaries.</p>

 <p class="fill-emphasis">This is some fill emphasis text with a custom symbol for emphasis marks (default).</p>
    <p class="before-emphasis">This is Some before emphasis text with an added dot in front of each word.</p>
    <p class="after-emphasis">This is Some after emphasis text with an added dot at the end of each word.</p>
    <p class="emphasis-combined">a shorthand for text-emphasis style and text-empasis-color</p>

<p class="default-shadow">This is Some default shadow text with a black shadow around it (default).</p>
<p class="custom-shadow">This is Some custom shadow text with two shadows added for depth. The first shadow has a dark, horizontal offset to the left of the text and a white shadow behind it, while the second shadow has a lighter, vertical offset to the right of the text.</p>
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

p.normal-white-space {
    white-space: normal;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.nowrap-white-space {
    white-space: nowrap; 
    border: 1px solid #ddd;
}

p.pre-white-space {
    white-space: pre; 
    border: 1px solid #ddd;
}

p.preline-white-space {
    white-space: pre-line; 
    border: 1px solid #ddd;
}

  p.fill-emphasis {
    text-emphasis: fill; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.before-emphasis {
    text-emphasis: before "•"; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

p.after-emphasis {
    text-emphasis: after "•"; 
    border: 1px solid #ddd;
}

p.emphasis-combined {
    text-emphasis: filled double-circle #ffb703;
    border: 1px solid #ddd;
}

p.default-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
        border: 1px solid #ddd;
    margin-bottom: 20px;
}

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

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!

Leave a Reply