Flutter中如何将Text组件默认的TextOverflow.ellipsis替换为指定字符串

Flutter自带的Text组件通过TextOverflow.ellipsis只能显示默认省略号，要换成自定义字符串（比如(www)），可以通过手动计算文本宽度结合LayoutBuilder实现，以下是具体方案：

实现思路 #

1. 借助LayoutBuilder获取组件可用宽度
2. 用TextPainter计算原始文本在指定样式下的渲染宽度
3. 对比文本宽度与可用宽度，若溢出则逐步截断原文本，拼接自定义溢出标识后确保总宽度不超出限制；未溢出则直接显示原文本

代码示例 #

class CustomEllipsisText extends StatelessWidget {
  final String text;
  final String overflowText;
  final TextStyle style;
  final int maxLines;

  const CustomEllipsisText({
    super.key,
    required this.text,
    required this.overflowText,
    required this.style,
    this.maxLines = 1,
  });

  @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(text, style: style, maxLines: maxLines);
        }

        // 计算自定义溢出标识的宽度
        final overflowPainter = TextPainter(
          text: TextSpan(text: overflowText, style: style),
          textDirection: TextDirection.ltr,
        )..layout();
        final overflowWidth = overflowPainter.width;

        // 逐步截断原文本，直到加上溢出标识后不超过可用宽度
        String truncatedText = text;
        while (true) {
          if (truncatedText.isEmpty) break;
          final truncatedPainter = TextPainter(
            text: TextSpan(text: truncatedText, style: style),
            textDirection: TextDirection.ltr,
          )..layout(maxWidth: constraints.maxWidth - overflowWidth);
          if (!truncatedPainter.didExceedMaxLines) {
            break;
          }
          truncatedText = truncatedText.substring(0, truncatedText.length - 1);
        }

        // 拼接截断文本与自定义溢出标识
        return RichText(
          text: TextSpan(
            children: [
              TextSpan(text: truncatedText, style: style),
              TextSpan(text: overflowText, style: style),
            ],
          ),
          maxLines: maxLines,
          overflow: TextOverflow.visible,
        );
      },
    );
  }
}

使用方式 #

将原Text组件替换为该自定义组件即可：

CustomEllipsisText(
  text: 'Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Text ',
  overflowText: '(www)',
  style: TextStyle(color: Colors.white, fontSize: 13),
  maxLines: 1,
)

该方案能精准控制溢出后的显示内容，同时保持与原Text组件一致的样式表现。

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