Flutter中TextOverflow无法避免溢出，如何限制文本长度？

你的问题核心在于外层Row中的第一个子Row没有宽度约束，导致内部的Text组件可以无限扩展，TextOverflow自然无法生效。Row组件默认会让子组件获取尽可能大的宽度，不给它限制的话，Text不会触发截断或裁剪逻辑。

解决方法 #

给第一个子Row添加宽度约束，有两种常用方式：

方式1：用Expanded 占据剩余空间

因为右侧两个Container总共占了屏幕宽度的50%（0.25+0.25），让左侧Row用Expanded占据剩下的50%空间，这样内部Text就会被限制在这个宽度内，TextOverflow生效。

修改后的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.red,
          width: MediaQuery.of(context).size.width,
          child: Row(children: [
            // 给第一个Row套Expanded
            Expanded(
              child: Row(children: [
                Text(
                  "A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
                  style: TextStyle(overflow: TextOverflow.clip),
                  // 如果需要省略号，加上maxLines:1和对应的overflow
                  // maxLines: 1,
                  // overflow: TextOverflow.ellipsis,
                )
              ]),
            ),
            Row(children: [
              Container(
                color: Colors.green,
                width: MediaQuery.of(context).size.width * .25,
              ),
              Container(
                color: Colors.blue,
                width: MediaQuery.of(context).size.width * .25,
              )
            ])
          ]),
        ),
      ),
    );
  }
}

方式2：用ConstrainedBox 指定最大宽度

直接给第一个Row设置maxWidth，比如屏幕宽度的50%，同样能限制Text的宽度：

// 替换第一个Row的部分
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width * 0.5,
  ),
  child: Row(children: [
    Text(
      "A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
      style: TextStyle(overflow: TextOverflow.clip),
    )
  ]),
),

注意点 #

• TextOverflow.clip 只是裁剪超出部分，不会显示省略号，如果需要省略号，要同时设置maxLines: 1和overflow: TextOverflow.ellipsis。
• 可以去掉多余的嵌套Row，直接把Text放在Expanded里，减少布局层级：

Expanded(
  child: Text(
    "A VERY LONG TEXT...",
    style: TextStyle(overflow: TextOverflow.clip),
  ),
),

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