如何使用CanvasKit的drawText实现类似CSS word-break: normal的文本绘制效果？

你遇到的默认拆分长单词的效果是CanvasKit中Paragraph的默认换行规则，若要实现和CSSword-break: normal一致的效果，仅需调整ParagraphStyle的配置即可，具体操作如下：

• 构造Paragraph样式时显式指定wordBreak枚举值
  CanvasKit内置的WordBreak枚举对应CSS的word-break规则：
  • WordBreak.Default：默认值，等价于word-break: break-word，超出容器宽度的长单词会被强制拆分换行
  • WordBreak.Normal：目标配置，等价于word-break: normal，仅在空白字符、连字符等天然断句位置换行，长单词超出容器宽度时会整体溢出不会被拆分
  • 其余可选值：WordBreak.BreakAll对应break-all，WordBreak.KeepAll对应keep-all
• 参考代码示例：

// 构建Paragraph样式时加入wordBreak配置
const paraStyle = CanvasKit.ParagraphStyle.make({
  heightMultiplier: 1.2,
  textStyle: {
    color: CanvasKit.BLACK,
    fontSize: 16,
  },
  // 新增这一行关闭长单词强制拆分
  wordBreak: CanvasKit.WordBreak.Normal,
});

// 后续Paragraph构建、布局、绘制流程无需修改
const paraBuilder = CanvasKit.ParagraphBuilder.make(paraStyle, fontMgr);
paraBuilder.addText('your very long word here like supercalifragilisticexpialidocious');
const paragraph = paraBuilder.build();
paragraph.layout(200); // 传入容器宽度
canvas.drawParagraph(paragraph, 0, 0);

如果你没有用Paragraph封装，直接调用原生drawText方法逐行绘制，不存在框架自动换行逻辑，自行计算每行文本宽度时仅在空白字符位置做拆分即可。

内容的提问来源于stack exchange，提问作者a-c-sreedhar-reddy