当前位置: 首页 > 知识库问答 >
问题:

Flutter-在溢出时换行文本,如插入省略号或褪色

孙佐
2023-03-14

我正在尝试创建一个行,其中的中心文本有一个最大的大小,如果文本内容太大,它适合的大小。

我插入了textoverflow.ellipsis属性来缩短文本,并插入了三重点...,但它不起作用。

Main.Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

结果:

预期:

共有1个答案

米迪
2023-03-14

您应该将容器包装在一个灵活的中,以使知道容器比其固有宽度窄是可以的。扩展也将起作用。

Flexible(
  child: new Container(
    padding: new EdgeInsets.only(right: 13.0),
    child: new Text(
      'Text largeeeeeeeeeeeeeeeeeeeeeee',
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        fontSize: 13.0,
        fontFamily: 'Roboto',
        color: new Color(0xFF212121),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),
 类似资料:
  • 我正在寻找一种在文本中添加省略号的方法,当它超过一定数量的行。我不想使用一个插件,我从另一个答案中找到了一个纯JS代码。但是,省略号“……”应用于每一个元素,即使它没有通过数字的限制。 HTML: CSS: !!我添加了两倍于行高的高度,以使超过两行的文本溢出。如果我想要三条线,我放三倍的线高。 JS: 使用“之前”和“之后”的示例进行编辑: 前:Lorem ipsum dolor sit ame

  • 问题内容: 我有一条路径列表(由于缺少更好的词,也许面包屑痕迹可以更好地描述它们)。有些值太长而无法在其父项中显示,因此我正在使用。问题在于重要信息在右侧,因此我希望省略号出现在左侧。像这样的ASCII艺术: 请注意,第一行足够短,因此仍保持左对齐,而其他两行又太长,因此省略号出现在左侧。 我更喜欢仅CSS的解决方案,但是如果无法避免,JS很好。如果该解决方案仅适用于Firefox和Chrome,

  • 问题内容: 我知道您可以使用CSS规则组合来在溢出时(不超出父级的范围)使文本以省略号(…)结尾。 是否有可能(随意说,不)达到相同的效果,但让文本换行超过一行? 如您所见,当文本的宽度大于div的宽度时,文本以省略号结尾。但是,仍然有足够的空间用于文本换行并继续。这会被中断,以使省略号起作用。 有任何想法吗? PS:没有JS解决方案,如果可能的话,使用纯CSS。 问题答案: 我不确定您是否看过

  • 问题内容: 我在页面上有一个块元素集合。它们都设置了CSS规则的空白,溢出,文本溢出,以便修剪掉溢出的文本并使用省略号。 但是,并非所有元素都会溢出。 无论如何,我可以使用JavaScript来检测哪些元素正在溢出吗? 谢谢。 补充:我正在使用的示例HTML结构。 SPAN元素始终适合单元格,它们应用了省略号规则。我想检测何时将省略号应用于SPAN的文本内容。 问题答案: 很久以前,我需要这样做,

  • 我不知道为什么这个简单的CSS不起作用... null null 应该在第4次“测试”前后切断

  • 我无法让工作,我希望有人能发现我找不到的错误。这是我的代码: HTML: CSS: JSFIDLE(JSIDLE):http://jsfiddle.net/59m5e6ex/ 我找到了这个,但据我所知,我的满足了所有要求。