Flutter文本溢出问题：如何让Row内文本显示省略号？

你的问题核心在于Row内部的右侧Column没有宽度约束，导致文本可以无限延伸，再加上部分长文本未配置溢出处理逻辑，才出现了"right overflowed by 205 pixels"的报错。按以下步骤修改即可解决：

具体改动点 #

• 移除Padding里的Expanded：这个Expanded放在Padding中完全无效，Expanded必须在Row/Column这类Flex容器内才能发挥作用。
• 给Row里的右侧Column包裹Expanded：让它占据Row剩余的可用宽度，限制自身不会无限制扩张。
• 给长文本添加maxLines和overflow: TextOverflow.ellipsis：尤其是那个服药说明的长文本，之前未配置溢出处理，这是溢出的主要原因。

修改后的完整代码 #

ListView(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  children: [
    Padding(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
      child: Container(
        height: 100,
        color: Colors.grey[100],
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(20, 10, 5, 10),
              child: Column(
                children: const [
                  SizedBox(height: 5),
                  Text(
                    "1",
                    style: TextStyle(
                      fontSize: 35,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    "MAY",
                    style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.bold,
                        color: Color.fromARGB(255, 231, 95, 97)),
                  ),
                ],
              ),
            ),
            // 给右侧Column套上Expanded，限制宽度
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 5),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 10, 20, 5),
                    child: Text(
                      "Viral fever & Cough",
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                    child: Text(
                      "Two dolo 650 one to be taken in the morning, another in the evening",
                      style: TextStyle(color: Colors.grey[600]),
                      // 添加溢出截断配置
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 20, 10),
                    child: Text(
                      "Dr. Shetty",
                      style: TextStyle(
                        color: Color.fromARGB(255, 63, 134, 172),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    )
  ],
)

补充说明 #

如果希望服药说明文本可以显示多行后再截断，只需把maxLines改成对应的行数（比如2）即可，overflow保持TextOverflow.ellipsis不变。

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