Flutter Web中TextOverflow.ellipsis末尾出现异常[]字符问题

在Flutter Web项目中使用TextOverflow.ellipsis实现文本溢出省略时，发现文本末尾出现多余的[]字符，相关代码片段如下：

Container(
  width: (size.width / 2) - 20,
  height: 260,
  decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(18)),
      color: Colors.white),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      ClipRRect(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(18),
          topRight: Radius.circular(18),
        ),
        child: widget.coverPhoto == null ||
                widget.coverPhoto.the320X240 == null
            ? SizedBox(
                width: (size.width / 2),
                height: 180,
                child: const Icon(
                  Icons.no_photography_rounded,
                  size: 35,
                  color: Color.fromRGBO(24, 56, 83, 1),
                ))
            : Image.network(
                widget.coverPhoto.the320X240,
                fit: BoxFit.cover,
                width: (size.width / 2),
                height: 180,
              ),
      ),
      const SizedBox(height: 10),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Text(
          "This is a sample text for this widget",
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          softWrap: false,
          style: const TextStyle(
            fontWeight: FontWeight.w600,
            color: Color.fromRGBO(24, 56, 83, 1),
          ),
        ),
      ),
      const SizedBox(
        height: 10,
      ),
      MyIconButton(
        title: "Na mapě",
        icon: Icons.location_pin,
        backgroundColor: const Color.fromRGBO(24, 56, 83, 1),
        textColor: Colors.white,
        verticalPadding: 5,
        horizontalPadding: 10,
        textSize: 13,
        spaceBetween: 10,
        iconSize: 15,
        borderRadius: 11,
        onTap: () {
          if (widget.geoLat != null && widget.geoLong != null) {
            if (widget.mobileView) {
              mobileMapController.move(
                  LatLng(widget.geoLat!, widget.geoLong!), 17);
              myMapController.showMap.value = true;
            } else {
              desktopMapController.move(
                  LatLng(widget.geoLat!, widget.geoLong!), 17);
            }
          }
        },
      ),
    ],
  ),
),

UI输出效果：

可能的原因及修复方案 #

• Flutter Web字体渲染兼容性bug：部分Flutter版本在Web端处理TextOverflow.ellipsis时存在字体渲染异常，尤其是使用自定义字体时。建议升级Flutter到最新稳定版，或临时切换为系统默认字体验证问题是否解决。
• 父容器宽度约束不明确：当前Text的父容器是Padding，而Padding的宽度由Column自动推导，可能导致Web端宽度计算异常。可以给Text外层包裹SizedBox明确指定宽度（需减去左右padding的总宽度）：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8),
  child: SizedBox(
    width: (size.width / 2) - 36, // 容器宽度减去左右各8的padding，再减去Container本身的左右间距
    child: Text(
      "This is a sample text for this widget",
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
      softWrap: false,
      style: const TextStyle(
        fontWeight: FontWeight.w600,
        color: Color.fromRGBO(24, 56, 83, 1),
      ),
    ),
  ),
),

• 软换行属性冲突：手动设置softWrap: false可能和Web端文本渲染逻辑冲突，尝试移除该属性（Flutter会根据maxLines自动判断是否允许软换行），或调整textAlign为TextAlign.start测试效果。

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