Flutter：如何根据可用空间实现文本裁剪？

我来帮你搞定这个文本裁剪异常的问题！你遇到的1 l...这种奇怪截断，核心原因是只给Text加了overflow却没指定maxLines，再加上Column布局没有给文本足够的约束空间，导致Flutter的布局计算出了问题。

试试下面修改后的代码，我帮你调整了布局逻辑：

GridTile(
  child: Card(
    elevation: 3.0,
    child: Container(
      padding: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // 标题部分：限制1行，过长自动截断
          Text(
            document['title'],
            style: TextStyle(fontWeight: FontWeight.bold),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          SizedBox(height: 8.0), // 标题和正文之间加个小间距
          // 正文部分：用Expanded让它占满剩余空间，同时限制行数
          Expanded(
            child: Text(
              document['text'],
              maxLines: 3, // 这里可以根据你的需求调整行数
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    ),
  ),
);

关键调整说明： #

• 必须加maxLines：TextOverflow.ellipsis需要配合maxLines才能知道在第几行截断，没有这个参数的话，Flutter无法正确计算截断位置，就会出现你看到的异常效果。
• 用Expanded包裹正文：Column默认会让子组件“自由生长”，如果文本太长会直接撑破Card的边界。Expanded会强制正文在Column的剩余可用空间内布局，配合maxLines就能完美实现多行截断。
• 可选优化：给标题也加上截断逻辑、增加间距、设置左对齐，让整体布局更美观合理。

另外，如果你的GridView是动态生成的，建议给gridDelegate设置childAspectRatio，固定每个网格项的宽高比，这样内部的文本布局约束会更明确，避免出现适配问题：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 你的列数
    childAspectRatio: 0.8, // 根据UI需求调整宽高比
  ),
  itemBuilder: (context, index) {
    // 上面的GridTile代码
  },
);

这样调整后，文本应该就能正常显示并按预期截断啦！

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