Flutter中如何让长文本根据长度自动换行以避免渲染溢出？

你遇到的文本溢出问题核心是Row布局中，承载评论内容的Column没有被限制最大横向宽度，导致内部Text组件无法获知可渲染的最大宽度边界，无法触发自动换行逻辑，你之前给Text加的Expanded仅控制纵向高度，不解决横向宽度约束问题。

修复后完整代码 #

Container(
  alignment: Alignment.center,
  width: double.infinity,
  height: 100.0,
  child: Row(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipOval(
          child: Image.asset(
            'assets/images/c1.png',
            fit: BoxFit.cover,
            width: 69,
            height: 69,
          ),
        ),
      ),
      // 新增Expanded包裹Column，限制最大宽度
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 可选，让文字左对齐更符合评论展示习惯
          children: [
            const Text(
              '@username',
              style: TextStyle(color: Colors.white),
            ),
            Expanded(
              child: const Text(
                'fwegergwefrvgervuhygtfvrcdxddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddne, a very long comment!!!',
                textAlign: TextAlign.justify,
                maxLines: 6,
                softWrap: true, // 显式开启自动换行
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
),

核心改动说明 #

• 给包裹用户名和评论的Column外层新增Expanded组件，强制该模块占满Row中头像之外的所有剩余宽度，给内部Text提供明确的宽度上限，触发自动换行
• 可选给Column添加crossAxisAlignment: CrossAxisAlignment.start属性，避免用户名和评论默认居中对齐的问题，更符合常规评论列表的视觉表现
• 显式给Text添加softWrap: true属性，确保自动换行逻辑开启

特殊场景补充 #

如果你的业务场景存在大量无空格的连续长字符串（比如全字母无空格的长内容、超长数字串等），原生Text的分词逻辑无法自动换行，可使用第三方Flutter文本处理包，给长文本自动插入零宽空格实现强制断行，无需修改现有布局逻辑。

内容的提问来源于stack exchange，提问作者Aryan Shandilya