Styling text in CSS

Alignment, case, decoration and how long lines are handled.

.lede {
  font-size: 1.125rem;
  text-align: start;
  max-width: 60ch;
}

.link {
  text-decoration: underline;
  text-decoration-color: #7c5cff;
  text-underline-offset: 0.2em;
}

.filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

How it works

1. text-decoration takes a color, style and thickness of its own.
2. text-overflow: ellipsis needs overflow and nowrap too.
3. hyphens and overflow-wrap stop long tokens overflowing.

Keywords and builtins used here

• ch
• em
• filename
• lede
• link
• overflow
• rem

The run, in numbers

Lines

17

Characters to type

246

Tokens

51

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 41 seconds.

Type this snippet

Step 4 of 4 in Color & type, step 13 of 26 in Selectors & the box model.

← Previous Next →