Text Styling

All in one: every text style, side by side

What this example compares

Where the lines sit: text-align: left vs right vs center vs justify, and no text-align at all
Centre the words or the box: text-align: center vs margin: 0 auto vs both
Lines on text: underline vs overline vs line-through vs none
The style of the line: solid, double, dotted, dashed, wavy in underline wavy #E07B1E
Thickness and gap: underline 3px vs text-underline-offset: 4px, and four longhands vs one shorthand
A link without an underline: colour only vs bold vs a bottom border vs the underline back on :hover and :focus
Meaning or look: <del> vs line-through, <strong> vs font-weight, with <em> and <mark>
Letter case: text-transform: none vs uppercase vs lowercase vs capitalize
Typed by hand or made by CSS: typed capitals vs uppercase, a hand-typed title vs capitalize
The four values of a shadow: soft vs hard vs no blur vs negative vs glow vs two shadows
Where a shadow helps: white text over the campus picture vs a shadow on body text
The first line or the gap: text-indent: 2em vs space between paragraphs
Spaces and line breaks: white-space: normal vs nowrap vs pre vs pre-wrap
A word too long for its box: nothing vs overflow-wrap: break-word vs the cut with an ellipsis
The ellipsis recipe: why text-overflow: ellipsis needs white-space: nowrap and overflow: hidden
Space between letters: letter-spacing: 0 vs 0.06em vs 0.15em vs 0.3em
Everything together: Asha Kumar's profile from the Build it section

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see seventeen panels (scroll inside the result to reach them all). Panel 1 shows the same paragraph four ways, with white gaps in the justified one, then marks that line up on the right and a centred heading. In panel 2 only the second and third boxes move to the middle. Panels 3 to 6 show underlines of every kind; in panel 6 the first link is hard to find in its sentence. In panel 7 the cards look the same in pairs. Panel 8 shows one line of HTML in four different cases, and in panel 9 the first two cards look identical. Panel 10 shows six shadows on the word Asha, and in panel 11 the white words are only easy to read on the second picture. Panel 13 shows the extra spaces only in the last two boxes, and in panels 14 and 15 the long address sticks out of its box everywhere except where it is broken onto several lines or cut off. Panel 17 is Asha's profile with tags in capitals and a long link cut off with three dots. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 15, why does the first box show no dots even though it has text-overflow: ellipsis?

Because nothing has been cut off. text-overflow: ellipsis only says what to draw where text is cut. The cutting is done by overflow: hidden, and white-space: nowrap keeps the text on one line, so you need all three together.