Truncation (Ellipsis & Line Clamp) 文本截断（省略号与行数截断） web

Text cut short with … — at the end of the line, after N lines, or in the middle

用 … 把文本截短 —— 在行尾、在 N 行之后，或者在中间

also called也叫: ellipsis, text overflow, line clamp, clamped text, truncated text省略号、文本溢出、行数截断、多行截断的文本、截断的文本
If you called it…如果你管它叫……: “the text gets cut off with three dots”「文字被切掉，后面跟三个点」
“show only two lines then dot dot dot”「只显示两行，然后点点点」
“long file name with dots in the middle”「长文件名中间几个点」
“cut the title after one line instead of wrapping”「标题一行就切断，别换行」
“text fades out at the edge instead of dots”「文字在边缘淡出，不用点」
“title too long for the box”「标题太长，框里放不下」

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 · JS

quarterly-review-meeting-notes-2026-final-v3.pdf

container width

标本可交互 —— 点点看。Specimen is live — try it.

Anatomy — every part, named解剖 —— 每个部件的名字

1 End ellipsis行尾省略号（End ellipsis） text-overflow: ellipsis

“Dot dot dot at the end of the line” — only kicks in alongside overflow: hidden and white-space: nowrap.
“行尾的点点点” —— 只有和 overflow: hidden、white-space: nowrap 一起才生效。

Prompt fragmentPrompt 片段
single-line truncation: overflow: hidden; white-space: nowrap; text-overflow: ellipsis

单行截断：overflow: hidden; white-space: nowrap; text-overflow: ellipsis
2 Line clamp行数截断（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.
“显示两行就切断”就是行数截断 —— 省略号落在允许的最后一行末尾。

Prompt fragmentPrompt 片段
multi-line clamp: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden

多行截断：display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden
3 Middle truncation中间截断（Middle truncation） NSLineBreakMode.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.
“长文件名中间的点”让两头都可读 —— macOS 原生支持（.byTruncatingMiddle）；Web 上要用 JS。

Prompt fragmentPrompt 片段
middle truncation keeping the start and the file extension visible (macOS: lineBreakMode = .byTruncatingMiddle; web: JS string slicing)

中间截断，保留开头和文件扩展名可见（macOS：lineBreakMode = .byTruncatingMiddle；Web：JS 字符串切片）
4 Fade-out (soft truncation)淡出截断（Fade-out/柔和截断） 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 fragmentPrompt 片段
fade-out truncation: mask-image: linear-gradient(to right, black 70%, transparent) on a nowrap, overflow-hidden line

淡出截断：在不换行、overflow-hidden 的一行上加 mask-image: linear-gradient(to right, black 70%, transparent)

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

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).

用 CSS 截断文本。单行：overflow: hidden; white-space: nowrap; text-overflow: ellipsis。多行：display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden（不带前缀的 line-clamp 在各浏览器还不稳）。保留扩展名的中间截断在 Web 上要用 JS —— macOS 上是 lineBreakMode = .byTruncatingMiddle。想要柔和淡出而不是点点点，用 mask-image: linear-gradient(to right, black 70%, transparent)。

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

Debug my text truncation (text-overflow ellipsis, line-clamp). Rule out: ellipsis needing all three of overflow hidden, white-space nowrap, and a real width constraint — in flex rows add min-width:0 to the shrinking child, that is the classic; multi-line needing -webkit-line-clamp with -webkit-box; middle truncation (file names) needing JS, CSS cannot do it; the full text unavailable because no title/tooltip reveals it. The symptom:

调试我的文本截断（text-overflow ellipsis、line-clamp）。逐项排除：省略号需要 overflow hidden、white-space nowrap 和真实宽度约束三者齐备 —— flex 行里要给收缩子项加 min-width: 0，这是经典坑；多行截断需要 -webkit-line-clamp 配 -webkit-box；中间截断（文件名）需要 JS，CSS 做不到；全文无从查看，因为没有 title/tooltip 展示。症状是：

In code代码里叫什么

Framework框架	Symbol符号	Note说明
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中间截断在 macOS 上是原生能力
CSS	mask-image	the fade-out alternative淡出效果的替代方案

Anatomy — every part, named解剖 —— 每个部件的名字

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

In code代码里叫什么

See also相关词条