You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter TextOverflow.visible不生效求助:需文本自动换行且Card占满空间

Flutter TextOverflow.visible 不生效的解决方案

问题根源:代码里的Row组件未给内部Column设置宽度约束,导致Column可无限延伸,Text组件无法感知边界,自然不会触发换行。Expanded包裹Card本身没问题,它只是让Card填充父组件可用空间,真正问题出在Row内部的布局约束。

解决方法:给Column组件套一层Flexible或Expanded,让它在Row中占据剩余可用宽度,这样Text就能获得明确的宽度限制,从而自动换行并完整显示内容。

修改后的代码:

Expanded(
  flex: 2,
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8.0),
    ),
    color: const Color(0XFFB0ADE2),
    margin: const EdgeInsets.symmetric(vertical: 5),
    elevation: 0,
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      child: Row(
        children: <Widget>[
          // 给Column套上Flexible,让它占据Row剩余空间
          Flexible(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'text',
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
                Text(
                  'subText very very long sentence to fit in one row and text.overflow visible is not working properly',
                  // softWrap: true默认会自动换行,无需额外设置TextOverflow.visible
                  softWrap: true,
                  style: const TextStyle(
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
)

补充说明:

  • Flexible允许子组件在必要时缩小(若Row有其他子元素),Expanded会强制子组件占据所有剩余空间,可根据实际需求选择。
  • 当softWrap: true时,TextOverflow.visible属于冗余设置,softWrap已能实现文本自动换行。

内容的提问来源于stack exchange,提问作者Laddybug Little

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 04:29:59