返回

generaltranslation@8.1.0

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

概述

generaltranslation@8.1.0 引入了 formatCutoff()：一个可感知区域设置的文本截断函数，能够针对不同语言使用合适的终止符来处理字符限制。

动机

UI 文本截断通常依赖 CSS text-overflow: ellipsis 或简单的字符串截取，但这些方法没有考虑不同区域设置下的惯例。不同语言在文本被截断时，使用的省略号字符、空格和标点规则都不一样。

此外，当 AI 翻译受到字符限制约束时，通常还需要在客户端严格执行这些限制，作为兜底方案。

用法

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

import { GT, formatCutoff } from 'generaltranslation'

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

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

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

负值 maxChars

负值会从末尾开始截取，并在前面加上终止符：

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

区域设置特定的终止符

不同区域设置使用的省略号样式不同：

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

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

自定义终止符

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

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

无终止符

使用 'none' 样式进行截断，不添加任何终止符：

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

UI 库的基础

此功能为 gt-react 和 gt-next 中面向 UI 的实现提供底层基础；这些库会根据各自框架的特点，对外暴露其中适用的部分功能。