Flutter实现Text内容超14字符时末尾显示省略号

针对你需要当文本长度超过14字符时，显示前11个字符并添加“...”的需求，这里有两种直接的实现方式：

方法一：手动处理字符串（精准按字符数截断） #

直接在Text组件中判断文本长度，超过14字符时截取前11位并拼接省略号，否则原样显示。修改你代码中的Text部分即可：

// ********** NAME:
Text(
  Products[i].data()["Name"].length > 14 
      ? "${Products[i].data()["Name"].substring(0, 11)}..." 
      : Products[i].data()["Name"],
  style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)),
  textAlign: TextAlign.center,
),

这种方式完全按照你要求的字符数规则处理，不会受字体大小、容器宽度等因素影响截断位置。

方法二：使用Text组件内置属性（按行截断，适合自适应场景） #

如果你希望文本根据容器宽度自动截断（不一定严格按14字符），可以利用Text的overflow和maxLines属性，不过这种方式是按行数而非固定字符数：

// ********** NAME:
Text(
  Products[i].data()["Name"],
  style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)),
  textAlign: TextAlign.center,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
),

这种方式会在文本超出一行时自动添加省略号，适合需要自适应容器宽度的场景，但截断位置由文本宽度决定，不是固定的14字符。

完整修改后的代码片段 #

将方法一的代码替换原Text部分后，完整的Column子项如下：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: Image.network(Products[i].data()["Image"], fit: BoxFit.cover, width: 110, height: 110),
    ),
    SizedBox(height: MediaQuery.of(context).size.height * 0.015),
    // ********** NAME:
    Text(
      Products[i].data()["Name"].length > 14 
          ? "${Products[i].data()["Name"].substring(0, 11)}..." 
          : Products[i].data()["Name"],
      style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)),
      textAlign: TextAlign.center,
    ),
  ],
),

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