文本截断器，免费

「一个字符」实际意味着什么

用户看到一个「字符」,而 JavaScript 看到三个值。字符串 「👨‍👩‍👧‍👦」(四人家庭表情符号)是 一个字形簇、七个 Unicode 代码点(由零宽连接符 U+200D 连接),和 十一个 UTF-16 代码单元。这就是为什么在 JavaScript 中 "👨‍👩‍👧‍👦".length === 11。权威定义存在于 Unicode 标准附件 #29「Unicode 文本分段」(当前版本 15.0,2022 年 9 月),该附件规定了字形簇边界、单词边界和句子边界。现代 JavaScript 通过 Intl.Segmenter 公开 UAX #29,在 ECMAScript 2022 中标准化,自 Firefox 125(2024 年 4 月)起在每个浏览器中发布;Chrome 自版本 87(2020 年 11 月)起拥有它,Safari 自 14.1(2021 年 4 月)起。使用 new Intl.Segmenter('zh', { granularity: 'grapheme' }) 以人类的方式计数。

您发布到的平台上的字符限制

• Google 搜索元描述:没有强制上限,但 SERP 摘要通常在 桌面端 155-160 字符 和 移动端约 120 字符 处截断。自 2018 年以来,Google 自己的指南强调摘要可以从页面的任何地方提取,而不仅仅是 <meta name="description"> 标签。
• Twitter / X: 自 2017 年 11 月起,免费帐户为 280 字符,自 2023 年 5 月起 X Premium 为 25 000。特殊计数规则:任何 URL 计为 23 字符,无论长度如何,CJK 字符每个计为 2。
• 短信:在 GSM 7-bit 字母(3GPP TS 23.038)中 每条消息 160 字符,在 UCS-2(UTF-16)中 70 字符用于非 GSM 文本,包括大多数表情符号和非拉丁文脚本。多部分短信每部分使用 153 / 67,因为用户数据头消耗 7 字符的负载。
• Open Graph 描述(Facebook):推荐 110-200 字符,通常在 300 处截断。
• Twitter Card 描述:最多 200 字符,超出部分用省略号截断。
• LinkedIn 帖子:总共 3 000 字符,但「查看更多」截断在桌面端约 210 字符 处触发。
• Web Push 通知正文:没有正式限制,但 iOS 在约 110 字符处截断,Android 显示约 200 字符。
• 数据库 VARCHAR(N):在 MySQL 中使用旧的 utf8 排序规则时,N 是字节;使用 utf8mb4 时,N 是字符。PostgreSQL varchar(N) 始终是字符。

单词边界不仅是 split(' ')

天真的单词边界截断器在 /\s+/ 上分割输入,并在使您超过限制的第一个单词之前切割。这对英语有效。它在 中文、日文、韩文和泰文 上失败,这些语言都不使用单词之间的空格:整个输入最终作为一个单一的「单词」,所以修剪器要么保留全部,要么剪切全部。阿拉伯语 使用空格,但以改变边界位置的方式连接字母形式。带有 granularity: 'word' 的 Intl.Segmenter 应用 UAX #29 单词边界算法,为每种语言产生正确的剪切。它还区分「类似单词」的段(返回 isWordLike: true)与标点符号和空格段,因此您可以通过对段进行一次遍历来找到字符预算之前的最后一个单词边界。

CSS 截断:text-overflow 和 line-clamp

如果目标是 视觉上 截断,同时将完整文本保留在 DOM 中(因此它仍可用于屏幕阅读器、搜索引擎和复制粘贴),请使用 CSS。单行截断 需要三个属性一起:overflow: hidden; white-space: nowrap; text-overflow: ellipsis;。text-overflow: ellipsis 在 CSS Basic User Interface Module Level 4(W3C 候选推荐 2021 年 8 月)中定义,自 Firefox 7(2011 年 9 月)起已在每个浏览器中发布;Internet Explorer 6 早在 2001 年 8 月就有它。多行截断 使用 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;。-webkit-line-clamp 属性可追溯到 WebKit 2009,现在在 CSS Overflow Module Level 3(W3C Working Draft)中定义。无前缀的 line-clamp 在 Safari 18(2024 年 9 月)和 Firefox 125(2024 年 4 月)中发布;始终包含 -webkit- 形式作为后备。关键限制:CSS 截断纯粹是展示性的。完整文本仍在 HTML 源中,因此 SEO 摘要、电子邮件摘要和 JS 驱动的搜索索引都看到未截断的字符串。

常见错误

• 使用 str.length 作为限制。JavaScript 的 String.prototype.length 返回 UTF-16 代码单元,而不是字符。包含三个大拇指表情「👍👍👍」的状态报告 length === 6;Twitter 将其计为 3。
• 不减去后缀长度。如果您的预算是 160 字符,并且您附加 …,您的文本主体有 159 字符可用。许多天真的实现产生超过限制的字符串。
• 对 CJK 和泰文进行空格分割。没有单词间空格的语言变得不可分割。使用带有 granularity: 'word' 的 Intl.Segmenter。
• 在去除尾随标点之前切割。「你好,世界!」修剪到 8 个字符天真地变成「你好,世界」(英文长度8),或者「你好,…」如果聪明,或者「你好…」如果更聪明并去除尾随逗号。
• 在 HTML 标签内截断。将 <a href="long-url">text</a> 截断到 30 个字符会产生带有未关闭标签的字符串。请先剥离 HTML 或使用 DOM 感知的截断器。
• 三个点 vs 一个省略号。Unicode 省略号 …(U+2026)是一个字符,三个点 ... 是三个。为平台的字符计数器选择正确的一个。
• 信任 <input maxlength> 进行客户端验证。HTML Living Standard 计算 UTF-16 代码单元,因此粘贴表情符号的用户看到的计数与您的 Unicode 感知后端验证器不同。在服务器端验证。

更多常见问题

为什么 Twitter 将我的 URL 计为 23 字符,即使它更长?

Twitter 通过其 t.co 短链接器包装每个 URL 用于分析和滥用检测,因此它按短链接器最坏情况长度计费每个 URL:HTTPS 为 23 字符。如果您写一个 100 字符的 URL,在 Twitter 的 UI 中它计为 23。同样的规则适用于 Twitter Card 元数据。开源库 twitter-text(Twitter,MIT)实现了准确规则,如果您需要字节级完美模拟。

此工具是否尊重阿拉伯语和希伯来语等 RTL 语言?

文本内容连同其 bidi(双向)标记一起保留。截断对逻辑顺序的字符进行操作,因此在第 100 个字符处剪切阿拉伯句子是在第 100 个逻辑字符处剪切(屏幕阅读器首先宣布的那个)。由于从右到左流,显示顺序可能在视觉上反转,但底层字符串是一致的。

为什么我的截断短信在 161 字符处仍然分成三部分?

短信对纯拉丁文文本使用 7-bit GSM 编码,一个段适合 160 个字符。但 任何 GSM-7 之外的字符,包括自动更正的弯曲「智能」引号(U+2018 / U+2019)、Unicode 省略号(U+2026)或表情符号,强制整个消息使用 UCS-2 编码,每段 70 字符。如果您截断的 160 字符消息包含一个智能引号,运营商会将其分成三个 70 字符 UCS-2 部分。将智能引号替换为 ASCII 引号以用于短信。

我可以截断 HTML 格式的文本而不破坏标签吗?

不能用字符计数的剪切安全地做到。要么先剥离 HTML 标签(通过 DOMParser 或服务器端解析器),截断纯文本,然后可选地重新包装;要么使用遍历节点树并克隆整个文本节点前缀的 DOM 感知截断器。HTML 字符串上的纯正则表达式不安全(HTML 不是常规语言)。

是否有任何东西被发送到服务器?

没有。您粘贴的文本、您选择的限制、您设置的后缀和截断的输出都在您浏览器的 JavaScript 中处理。不进行任何网络调用,也不存储您输入的副本。在 DevTools 的网络选项卡中验证。