Container width

text-overflow: ellipsis

The quarterly review meeting has been rescheduled to Friday afternoon

-webkit-line-clamp: 2

Release notes: this update reworks the sync engine, fixes twelve reported issues with offline edits, and adds keyboard shortcuts for every panel in the app.

middle truncation (filename)

Quarterly Marketing Report — Final v12.pdf

mask-image fade-out

The quarterly review meeting has been rescheduled to Friday afternoon

Flip Narrow / Wide — the … at the cut is one ellipsis character, not three dots

Truncation (Ellipsis & Line Clamp)

/ text-overflow: ellipsis · -webkit-line-clamp /

also called ellipsis, text overflow, line clamp, clamped text, truncated text

“The text that gets cut off with three dots” is truncation, and the dots are an ellipsis (…, one character — not three periods). End-of-line truncation is text-overflow: ellipsis; cutting after N lines is a line clamp; dots in the middle of a long filename are middle truncation — native on macOS, JS on the web. Don't confuse it with the ⋯ overflow menu button: same dots, completely different job.

Anatomy — every part, named

1
End ellipsistext-overflow: ellipsis
“Dot dot dot at the end of the line” — only kicks in alongside overflow: hidden and white-space: nowrap.
2
Line clamp-webkit-line-clamp
“Show two lines then cut it off” is a line clamp — the ellipsis lands at the end of the last allowed line.
3
Middle truncationNSLineBreakMode.byTruncatingMiddle
“The dots in the middle of a long file name” keep both ends readable — native on macOS (.byTruncatingMiddle); on the web it takes JS.
4
Fade-out (soft truncation)mask-image
“The text fades out at the edge instead of dots” — a soft truncation done with a transparency mask, common in cards and code previews.

Prompt — paste into your agent

Truncate the text with CSS. Single line: overflow: hidden; white-space: nowrap; text-overflow: ellipsis. Multi-line: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden (unprefixed line-clamp isn't safe in all browsers yet). Middle truncation that preserves the file extension needs JS on the web — on macOS it's lineBreakMode = .byTruncatingMiddle. For a soft fade-out instead of dots, use mask-image: linear-gradient(to right, black 70%, transparent).

In code

The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).

CSS	`text-overflow: ellipsis`
CSS	`-webkit-line-clamp`
CSS	`white-space: nowrap`	required for single-line ellipsis
AppKit	`NSLineBreakMode.byTruncatingMiddle`	middle truncation is native on macOS
CSS	`mask-image`	the fade-out alternative

Anatomy — every part, named

Prompt — paste into your agent

In code

See also

Search