如何创建边界框并将文本按规则自适应填入其中

前置依赖 #

你需要先拿到对应运行环境的文本宽度测量能力：比如前端可以用CanvasRenderingContext2D.measureText()接口，安卓用Paint.measureText()，iOS用NSString.sizeWithAttributes()，核心是能计算指定字号下任意字符串的实际渲染宽度。

具体实现步骤 #

• 第一步：预处理输入参数
  把入参text按,分割为单词列表，去除每个单词前后的空白字符，同时找出列表中最长的单个单词备用。
• 第二步：适配最长单词，确定可用字号
  从默认字号（比如常规用的14px）开始逐号缩小，直到最长单词在当前字号下的渲染宽度 ≤ 设定的边界框宽度width，保证单个单词不会超出边界框，满足规则3的要求。
  • 可以根据需求设置字号下限，比如最小到10px，如果到下限还是放不下可以额外加截断加省略号的兜底逻辑。
• 第三步：判断是否可以单行展示
  用第二步得到的字号，计算全部文本拼接后的总宽度（记得把单词之间的, 分隔符宽度也算进去），如果总宽度 ≤ width，直接按单行渲染即可，边界框高度为当前字号对应的行高，满足规则1的要求。
• 第四步：单行放不下时走自动换行逻辑
  仍然使用第二步确定的字号，按行宽等于width的规则对文本进行自动折行，统计最终需要的行数，边界框高度为 行数 × 行高，宽度保持设定的width不变，满足规则2的要求。

可选优化点 #

• 如果对性能要求高，可以用二分法来缩小字号范围，不用逐号尝试，更快找到符合要求的字号
• 可以加入最小行高限制，避免字号缩小后行高太挤影响阅读

内容的提问来源于stack exchange，提问作者Ilai K