Flutter含换行符文本溢出显示省略号问题求助

问题原因 #

Flutter原生Text组件的TextOverflow.ellipsis仅在单行内容超出容器宽度时才会显示省略号。你的文本通过\n分割为多行，前3行均未超出宽度，因此第三行末尾不会自动添加省略号——即使后面还有更多行内容。

可行解决方案 #

方案一：使用readmore包（推荐） #

这个包支持按行数截断文本并自动添加省略号，同时内置展开/收起功能。

1. 添加依赖到pubspec.yaml：

dependencies:
  readmore: ^3.0.0

2. 示例代码：

Container(
  width: 200.0,
  padding: const EdgeInsets.all(8.0),
  margin: const EdgeInsets.only(right: 10.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8.0,
      )
    ],
  ),
  child: ReadMoreText(
    'Some text\nSecond Line\nThird Line\nFourth',
    trimLines: 3,
    trimMode: TrimMode.line, // 关键：按行截断而非字符
    trimCollapsedText: '...展开',
    trimExpandedText: '收起',
    style: TextStyle(),
    moreStyle: TextStyle(color: Colors.blue),
    lessStyle: TextStyle(color: Colors.blue),
  ),
)

方案二：自定义展开收起组件（无第三方依赖） #

通过计算文本行数，手动实现截断和展开逻辑：

class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;
  final TextStyle? style;

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

  @override
  State<ExpandableText> createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    final textStyle = widget.style ?? DefaultTextStyle.of(context).style;
    final textLines = widget.text.split('\n');

    // 判断是否需要截断
    if (textLines.length <= widget.maxLines) {
      return Text(widget.text, style: textStyle);
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          _isExpanded
              ? widget.text
              : '${textLines.take(widget.maxLines).join('\n')}...',
          style: textStyle,
        ),
        GestureDetector(
          onTap: () => setState(() => _isExpanded = !_isExpanded),
          child: Text(
            _isExpanded ? '收起' : '展开',
            style: TextStyle(color: Colors.blue, fontSize: textStyle.fontSize),
          ),
        ),
      ],
    );
  }
}

// 使用示例
Container(
  width: 200.0,
  padding: const EdgeInsets.all(8.0),
  margin: const EdgeInsets.only(right: 10.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8.0,
      )
    ],
  ),
  child: ExpandableText(
    'Some text\nSecond Line\nThird Line\nFourth',
    maxLines: 3,
    style: TextStyle(),
  ),
)

为什么AppReadMoreText未生效？ #

大概率是未配置trimMode参数，默认按字符截断时，换行符会被当作普通字符处理，无法正确识别多行结构导致省略号显示异常。

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