返回

generaltranslation@8.1.0

Ernest McCarter avatarErnest McCarter
generaltranslation8.1.0formattingtext-truncationlocale-aware

概览

generaltranslation@8.1.0 引入了 formatCutoff()，这是一个具备 locale 感知能力的文本截断函数，可在满足字符限制的同时，为不同语言使用合适的终止符号。

动机

UI 文本截断通常依赖 CSS text-overflow: ellipsis 或简单地截断字符串，但这些方式不会考虑与 locale 相关的特定约定。当文本被截断时，不同语言在省略号字符、空格使用和标点规则上各不相同。

此外，当 AI 翻译受到字符数限制时，往往还需要在客户端通过 fallback 严格执行这些限制。

用法

formatCutoff() 既可以作为 GT 实例方法，也可以作为独立函数使用：

import { GT, formatCutoff } from 'generaltranslation'

const gt = new GT({ targetLocale: 'en-US' })

// 基本截断
gt.formatCutoff('Hello, world!', { maxChars: 8 })
// 返回：'Hello, w…'

// 独立函数
formatCutoff('Hello, world!', { 
  locales: 'fr-FR', 
  maxChars: 8 
})
// 返回：'Hello, w\u202F…'  // 注意省略号前的窄空格

负值 maxChars

负值会从末尾开始截取，并在开头添加终止符：

gt.formatCutoff('Hello, world!', { maxChars: -3 })
// 返回：'…ld!'

不同 locale 的结束符

不同 locale 使用不同形式的省略号：

// 中文和日文使用双省略号
formatCutoff('你好世界', { locales: 'zh-CN', maxChars: 4 })
// 返回：'你好……'

// 法语在省略号前使用窄不换行空格  
formatCutoff('Bonjour', { locales: 'fr-FR', maxChars: 5 })
// 返回：'Bonj\u202F…'

自定义终止符

通过自定义终止符和分隔符来覆盖默认行为：

gt.formatCutoff('Long text here', {
  maxChars: 10,
  terminator: '...',
  separator: ' '
})
// 返回：'Long text ...'

无终止符

使用 'none' 样式进行不带终止符的截断：

gt.formatCutoff('Hello, world!', {
  maxChars: 5,
  style: 'none'
})
// 返回：'Hello'

UI 库的基础

该功能作为 gt-react 和 gt-next 中 UI 专用实现的基础层，不同框架会基于此公开适合自身的功能子集。