如何修复Flutter中TextOverflow.ellipsis出现的异常符号问题？

当给Flutter的Text组件设置maxLines和TextOverflow.ellipsis后，文本溢出时末尾未显示正常省略号，而是出现异常符号（如方块乱码），相关代码示例如下：

Text(
  'Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title ',
  style: layout.theme.textTheme.styleSB16,
  maxLines: 3,
  overflow: TextOverflow.ellipsis,
)

常见解决方法： #

• 检查字体完整性
  当前使用的styleSB16对应的字体文件可能缺失省略号（Unicode编码U+2026）字符，导致系统用缺失字符占位符替代。需更换包含完整字符集的字体，或确保目标字体文件中包含该省略号字符。

• 添加字体兜底方案
  修改文本样式，为字体添加系统默认字体作为兜底，确保在目标字体缺失字符时，系统能使用兜底字体渲染省略号：

  style: layout.theme.textTheme.styleSB16.copyWith(
    fontFamilyFallback: ['sans-serif'], // 可根据平台选择对应兜底字体，如iOS的PingFang SC
  ),
  

• 手动实现省略号逻辑
  若上述方法无效，可通过TextPainter判断文本是否溢出，手动截取文本并拼接省略号：

  LayoutBuilder(
    builder: (context, constraints) {
      final originalText = 'Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title ';
      final textSpan = TextSpan(text: originalText, style: layout.theme.textTheme.styleSB16);
      final textPainter = TextPainter(
        text: textSpan,
        maxLines: 3,
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: constraints.maxWidth);
  
      if (textPainter.didExceedMaxLines) {
        // 这里的截取长度可根据实际布局调整，避免截断到单词中间
        final truncatedText = originalText.substring(0, originalText.length - 8) + '...';
        return Text(
          truncatedText,
          style: layout.theme.textTheme.styleSB16,
          maxLines: 3,
        );
      } else {
        return Text(
          originalText,
          style: layout.theme.textTheme.styleSB16,
          maxLines: 3,
        );
      }
    },
  )
  

• 升级Flutter版本
  部分旧版Flutter在特定字体与maxLines组合场景下存在渲染bug，升级到最新稳定版可修复此类问题。

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