CSS Text Effects — Shadows, Wrapping & Overflow

Think of a shop signboard. The letters are big, they cast a soft shadow in the sun, and they never spill off the edge of the board — even a very long shop name is handled neatly. CSS text effects give you the same control over words on a page: shadows that lift headings off the background, rules that stop long words from breaking your layout, and even text that runs vertically like the title on a book spine.

Diagram — see how it fits together

Shadows that lift text off the page

text-shadow takes up to four values: the horizontal offset, the vertical offset, the blur radius, and the colour. text-shadow: 2px 2px 4px rgba(0,0,0,0.3); puts a soft grey shadow 2px right and 2px down from each letter. You can stack several shadows with commas — a light shadow above and a dark shadow below can make text look carved into the page. The key is restraint: one soft shadow adds depth, five shadows just look messy.

Long words that break the layout

Normally a browser breaks lines only at spaces. A single very long word — a long link, a username, a German compound word — has no spaces, so it can overflow its box and break the whole layout. overflow-wrap: break-word; (also written as word-wrap) tells the browser it may break a long word when it has to. The opposite problem is a headline that must stay on one line: white-space: nowrap; stops wrapping, overflow: hidden; clips the extra text, and text-overflow: ellipsis; adds the three dots that say "there is more".

Writing sideways

writing-mode changes the direction text flows in. writing-mode: vertical-rl; makes text run top to bottom, right to left — exactly what you want for a side heading, a vertical notice board, or a book spine. The box itself does not change shape; only the text inside turns upright.

Common mistakes

• Using text-overflow: ellipsis; on its own — without nowrap and overflow: hidden it does nothing.
• Forgetting that text-shadow offsets come in pairs — the first value moves the shadow sideways, the second moves it down; swapping them moves the shadow the wrong way.
• Stacking five or six shadows on one heading — it looks muddy; one soft shadow usually beats a pile of them.
• Using word-break: break-all; everywhere — it breaks words even when they would fit, making normal text hard to read; prefer overflow-wrap: break-word;.
• Expecting writing-mode to rotate the box — it only turns the text; the box keeps its normal width and height.

Remember

• text-shadow: x y blur colour; lifts text off the background; keep it to one soft shadow.
• overflow-wrap: break-word; lets very long words break instead of overflowing their box.
• white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; gives the three-dots effect — all three are required.
• writing-mode: vertical-rl; runs text top to bottom for side headings.
• Put word-wrap on user-typed content, so one long link never breaks your layout.

Example explained

• h1.shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } — the big green heading gets a soft grey shadow 2px right and 2px down, which lifts it off the page.
• .long-word { overflow-wrap: break-word; } — the extremely long word in the first card breaks across lines instead of bursting out of its box.
• .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } — the long headline in the second card stays on one line and ends with three dots.
• .side { writing-mode: vertical-rl; } — the dark "Notice Board" strip runs its text top to bottom, like a book spine.
• .wrap { display: flex; } — the vertical strip and its paragraph sit side by side, so the side heading looks like a real notice board.