Flutter中textOverflow.ellipsis放置错位导致文本溢出不生效如何解决

问题根因 #

你写的TextOverflow属性不生效，核心原因是承载课程描述的Text组件的父级Column没有被限制最大宽度：该Column处于Row布局内，Row的子组件默认会按照自身内容撑开宽度，不会主动适配父容器的剩余宽度，因此溢出裁切规则无法触发。

修复代码 #

你只需要修改buildTaskList方法中课程描述区域的代码，给包裹描述文本的Column套上Expanded组件，同时给Text加上maxLines属性即可，修改后的代码片段如下：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Icon(Icons.description, size: 20),
    const SizedBox(width: 5),
    // 用Expanded限制Column最大宽度为当前Row的剩余可用空间
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Subject Description",
            style: TextStyle(fontSize: 12),
          ),
          const SizedBox(height: 5),
          Text(
            des,
            overflow: TextOverflow.ellipsis, // 替换成你需要的溢出模式
            maxLines: 6, // 根据容器剩余高度调整最大展示行数
            style: const TextStyle(color: Colors.grey, fontSize: 10),
          ),
        ],
      ),
    ),
  ],
)

其他可选解决方案 #

• 如果不需要裁切文本，想要完整展示长文本，可以把Text组件套在SingleChildScrollView内，让文本区域可滚动
• 也可以直接给承载文本的Column设置固定宽度，同样可以触发溢出裁切规则
• 如果你需要文本自适应容器大小，不想要裁切也不想要滚动，可以引入第三方auto_size_text组件，实现字体大小自动适配容器尺寸

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