如何设置Flutter文本长度限制与溢出效果，实现多行末尾自定义提示？

问题原因 #

你当前使用的TextOverflow.ellipsis是Flutter原生默认的溢出样式，仅支持显示三个省略号，无法直接自定义为...more后缀；另外你现有代码中的softWrap: false配置会禁止文本自动换行，需要先调整为softWrap: true保证文本可以正常折行到第二行。

方案1：无第三方依赖原生实现 #

通过TextPainter提前计算文本是否溢出，若溢出则手动拼接自定义后缀后渲染，示例代码如下：

LayoutBuilder(
  builder: (context, constraints) {
    final textStyle = TextStyle(fontSize: 14); // 替换为你的实际文本样式
    final content = seedPost.content!;
    const maxLines = 2;
    const suffix = '...more';
    
    // 构造TextPainter计算文本布局
    final textPainter = TextPainter(
      text: TextSpan(text: content, style: textStyle),
      maxLines: maxLines,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: constraints.maxWidth);
    
    // 判断文本是否溢出
    if (textPainter.didExceedMaxLines) {
      return Text(
        // 截断长度可根据实际文本样式微调，也可自行实现更精准的逐字截断逻辑
        '${content.substring(0, content.length - 10)}$suffix',
        style: textStyle,
        maxLines: maxLines,
        softWrap: true,
        textAlign: TextAlign.left,
      );
    } else {
      return Text(
        content,
        style: textStyle,
        maxLines: maxLines,
        softWrap: true,
        textAlign: TextAlign.left,
      );
    }
  },
)

方案2：使用第三方包简化实现 #

如果可以接受引入第三方依赖，使用成熟的文本溢出处理包可以快速实现需求，还支持单独自定义后缀的样式：

1. 先在pubspec.yaml中引入对应依赖

dependencies:
  text_ellipsis: ^最新版本号

2. 调用示例：

TextEllipsis(
  text: seedPost.content!,
  maxLines: 2,
  style: TextStyle(fontSize: 14),
  suffix: Text(
    '...more',
    style: TextStyle(color: Colors.blue), // 可单独设置后缀的颜色、字号等样式
  ),
)

内容的提问来源于stack exchange，提问作者김민진