Flutter：容器内文本换行后右下角显示省略号的实现问询

嘿，这个问题我碰到好多次了！你现在遇到的是Flutter里多行文本溢出省略的典型场景——默认的TextOverflow.ellipsis只在单行溢出时生效，要让文本先换行、直到容器右下角才显示省略号，得把几个关键属性配合起来用。

核心解决思路 #

要实现这个效果，需要同时满足两个条件：

1. 给容器设置明确的尺寸约束（宽度/高度，或者通过父组件限制），让文本知道什么时候该触发溢出；
2. 给Text组件配置三个关键属性：
   • maxLines: 指定文本最多显示多少行（比如你希望到第3行末尾显示省略号，就设为3）
   • overflow: TextOverflow.ellipsis: 开启溢出省略效果
   • softWrap: true: 允许文本自动换行（默认是true，但显式声明更稳妥）

完整代码示例 #

Container(
  // 给容器设置明确宽度和高度，或者只设宽度让高度自适应maxLines
  width: 250,
  height: 100,
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey.shade300),
    borderRadius: BorderRadius.circular(4),
  ),
  child: Text(
    "这是一段很长很长的测试文本，用来验证多行溢出显示省略号的效果。当文本内容超过容器允许的最大行数时，就会在右下角自动显示省略号啦！",
    maxLines: 3, // 你可以根据容器高度调整这个数值
    overflow: TextOverflow.ellipsis,
    softWrap: true,
    style: const TextStyle(fontSize: 14),
  ),
)

为什么之前的写法不生效？ #

你之前只设置了TextOverflow.ellipsis但没指定maxLines，或者maxLines默认为1——这种情况下Text组件会强制单行显示，自然只会在第一行末尾出现省略号。只有当你指定了maxLines，并且容器尺寸不足以容纳这些行的文本时，才会触发多行末尾的省略号效果。

如果你的容器不需要固定高度，也可以只设置宽度，让容器高度自动适配maxLines的行数，超出时同样会显示省略号，非常灵活。

内容的提问来源于stack exchange，提问作者Colin Burke