Flutter开发之Text的overflow属性不生效（14）

最新推荐文章于 2025-03-11 09:00:00 发布

沐雨07

最新推荐文章于 2025-03-11 09:00:00 发布

阅读量1.1w

点赞数 2

分类专栏： Flutter开发教程文章标签： Text的overflow属性不生效 TextOverflow.ellipsis显示黄黑相间 Text多行显示 Text 文本划线 TextOverflow.ellipsis布局溢出

本文链接：https://blog.csdn.net/shifang07/article/details/93903327

版权

Flutter开发教程专栏收录该内容

58 篇文章

订阅专栏

我在使用 Text 控件时，由于文字太多，需要省略显示。设置

overflow: TextOverflow.ellipsis

没有效果，尾部显示还多了黄色相间的胶带色块。应该是：提示Text的布局边界溢出了。

在这里插入图片描述

解决方法：
用Container 包Text 设置Container宽度的方式解决了。

Container(
   padding: EdgeInsets.only(top: 0),
     width: 90,
     child: Text(
              "你好你好2226",
              textAlign: TextAlign.left, // 对齐方式

              // 不指定宽度时，下面没有效果，尾部显示 黄色相间的胶带色块
              overflow: TextOverflow.ellipsis,// 文字显示不全样式
              maxLines: 1, // 最大显示行数，默认为最大
              style: TextStyle(fontSize: 18.0, color: Colors.black54),
           ),
),

在这里插入图片描述

总结：

Text组件本身是没有宽度的，要设置overflow属性，必须给它指定宽度，我们可以通过Container设置指定宽度。