Cutting text off in CSS

One line is a different technique from three lines, and both need a width to work against.

.one-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-inline-size: 0;
}

.three-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.url { overflow-wrap: anywhere; hyphens: auto; }
.balanced { text-wrap: balance; }
.pretty { text-wrap: pretty; }

How it works

1. text-overflow: ellipsis needs nowrap and an overflow that is not visible.
2. line-clamp handles several lines and needs no fixed height.
3. overflow-wrap: anywhere is the escape hatch for an unbreakable URL.

Keywords and builtins used here

• balanced
• display
• hyphens
• overflow
• pretty
• url

The run, in numbers

Lines

17

Characters to type

323

Tokens

71

Three-star pace

90 tpm

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

Type this snippet

Step 1 of 3 in Text & scrollers, step 7 of 13 in Styling components.

← Previous Next →