Flutter中如何为RichText组件实现word-break文字断行效果

Flutter 中RichText即使开启softWrap: true，默认也仅会在空格、连字符、标准标点这类预设断点位置换行，超长无断点单词、连续无空格字符串不会在字符内部断行，会直接溢出容器，无法实现类web端word-break的任意位置断行效果。

根据使用的Flutter版本选择对应方案即可：

方案1：官方原生属性实现（推荐，Flutter 3.10+ 适用） #

Flutter 3.10及以上版本的TextStyle新增了wordBreak参数，直接配置即可实现对应断行效果，不需要额外修改文本内容。
可选枚举值说明：

• WordBreak.normal：默认规则，仅在合法断点换行，长单词直接溢出
• WordBreak.breakAll：等价于CSS的word-break: break-all，可在任意字符位置断行，完全避免长文本溢出
• WordBreak.breakWord：等价于CSS的overflow-wrap: break-word，优先在单词边界换行，单行实在放不下长单词时才会在单词内部断行

你只需要在所有TextSpan的样式中加入wordBreak: WordBreak.breakAll即可，修改后的可直接运行代码如下（顺便优化了原代码中重复判断文本前缀的冗余逻辑）：

RichText(
  overflow: TextOverflow.ellipsis,
  maxLines: 3,
  softWrap: true,
  text: TextSpan(
    children: _parseTextFunction(
      pharmyAdvice[index]['advices'][0].toString(),
    )
        .map(
          (data) {
            final rawText = data.toString();
            final isMention = rawText.startsWith("@");
            final displayText = isMention
                ? rawText.replaceAll("@", "")
                : rawText.startsWith("\n")
                    ? rawText.replaceAll("\n", " ")
                    : rawText;
            return TextSpan(
              text: displayText,
              style: (isMention ? TextStyles.h3Bold : TextStyles.h3Light).copyWith(
                color: AppTheme.blackColor,
                letterSpacing: -0.38,
                height: 1.38.h,
                wordBreak: WordBreak.breakAll, // 核心配置：开启任意位置断行
              ),
            );
          },
        )
        .toList(),
  ),
)

方案2：低版本兼容实现（Flutter 3.10以下适用） #

如果使用的Flutter版本低于3.10，没有内置wordBreak参数，可以通过插入零宽空格\u200B实现效果：零宽空格是Flutter认可的合法换行断点，本身不会渲染出任何可见内容，在每个字符后插入零宽空格后，文本就可以在任意位置断行。
实现步骤：

• 编写通用文本处理函数，为传入文本的字符间隙插入零宽空格
• 处理TextSpan的显示文本时，调用该函数处理后再赋值
  示例处理函数：

String insertZeroWidthSpace(String text) {
  // 空文本、纯空格换行文本不需要处理
  if (text.trim().isEmpty) return text;
  return text.split('').join('\u200B');
}

使用时直接将处理后的文本传给TextSpan即可：

text: insertZeroWidthSpace(displayText)

• 原代码中直接将所有\n替换为空格，如果需要保留原文本的手动换行效果，不要直接替换换行符，可以单独为换行内容创建空TextSpan或者识别换行符单独处理
• 如果多个相邻TextSpan拼接处出现断行异常，检查相邻Span的文本首尾是否存在多余空格，确保所有TextSpan配置了统一的wordBreak规则
• 如果需要实现“长单词才断、正常短单词保持整体”的效果，将WordBreak.breakAll替换为WordBreak.breakWord即可

内容的提问来源于stack exchange，提问作者리오넬사니