Flutter带换行文本超出maxLines时不显示省略号的解决方法

问题场景 #

当Flutter的Text.rich组件加载包含换行符的文本，且设置了maxLines限制时，组件不会在超出行数的末尾自动添加省略号。示例代码如下：

Text.rich(
  maxLines: 4,
  softWrap: true,
  overflow: TextOverflow.ellipsis,
  text: TextSpan(text: '''
1
2
3
4
5'''),
),

实际运行时不会在第4行末尾显示省略号，而是直接截断后续内容。

解决方法 #

• 方法一：预处理文本，替换换行符为空格
  如果业务允许忽略原文本的换行格式，可先将文本中的换行符替换为空格，让文本变为单段落，触发Text.rich默认的省略号逻辑：

final rawText = '''
1
2
3
4
5''';
final processedText = rawText.replaceAll('\n', ' ');

Text.rich(
  maxLines: 4,
  softWrap: true,
  overflow: TextOverflow.ellipsis,
  text: TextSpan(text: processedText),
),

• 方法二：自定义组件结合TextPainter计算行数
  若需要保留原换行格式，可通过TextPainter手动计算文本的视觉行数，判断是否超出限制后手动添加省略号：

class EllipsisText extends StatelessWidget {
  final String text;
  final int maxLines;
  final TextStyle? style;

  const EllipsisText({
    super.key,
    required this.text,
    required this.maxLines,
    this.style,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final textPainter = TextPainter(
          text: TextSpan(text: text, style: style),
          maxLines: maxLines,
          textDirection: TextDirection.ltr,
        )..layout(maxWidth: constraints.maxWidth);

        if (!textPainter.didExceedMaxLines) {
          return Text.rich(TextSpan(text: text), style: style);
        }

        final lines = text.split('\n');
        // 处理行数超出的情况
        if (lines.length <= maxLines) {
          // 换行导致视觉行数超，直接在最后一行末尾加省略号
          final truncatedText = lines.take(maxLines).join('\n');
          return Text.rich(
            TextSpan(text: '$truncatedText...'),
            maxLines: maxLines,
            softWrap: true,
            style: style,
          );
        } else {
          // 截取前maxLines-1行，最后一行截取部分内容加省略号
          final preLines = lines.take(maxLines - 1).join('\n');
          final lastLine = lines[maxLines - 1];
          final lastLinePainter = TextPainter(
            text: TextSpan(text: lastLine, style: style),
            textDirection: TextDirection.ltr,
          )..layout(maxWidth: constraints.maxWidth);

          String truncatedLastLine;
          if (lastLinePainter.didExceedMaxLines) {
            // 最后一行本身超宽，截取部分字符
            truncatedLastLine = '${lastLine.substring(0, lastLine.length ~/ 2)}...';
          } else {
            truncatedLastLine = '$lastLine...';
          }
          return Text.rich(
            TextSpan(text: '$preLines\n$truncatedLastLine'),
            maxLines: maxLines,
            softWrap: true,
            style: style,
          );
        }
      },
    );
  }
}

// 使用示例
EllipsisText(
  text: '''
1
2
3
4
5''',
  maxLines: 4,
  style: TextStyle(fontSize: 16),
),

• 方法三：借助第三方包
  使用成熟的第三方包简化复杂文本的省略逻辑，比如auto_size_text：

// 先在pubspec.yaml添加依赖：auto_size_text: ^3.0.0
AutoSizeText.rich(
  TextSpan(text: '''
1
2
3
4
5'''),
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(fontSize: 16),
),

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