Flutter - 溢出时换行文本，例如插入省略号或淡化。

Question

我正在尝试创建一条线，其中居中文本具有最大大小，如果文本内容太大，则会自适应大小。

我插入了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)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

结果：

预期：

- rafaelcb21

---

这个问题的标题和内容不匹配。你的期望结果显示省略号。然而，标题中提到了“wrap”和“fade”。请调整标题以使其与实际问题相符。这会让这个问题变得混乱：https://dev59.com/g1QK5IYBdhLWcg3wZfB_ - DarkTrick

Answer 1

您应该在一个Flexible中包含您的Container，以便让您的Row知道Container可以比其内在宽度更窄。 Expanded也可以使用。

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,
      ),
    ),
  ),
),

- Collin Jackson

---

我在Column中遇到了类似的问题。这种方法对我不起作用。https://dev59.com/jFQK5IYBdhLWcg3wO9ip - Michael Tedla

有没有办法在文本字段中实现这个功能？ - mangkool

这种方法并不总是适用。在我的情况下，所有TextFlow属性（如省略号、淡出或剪辑）对于位于InkWell内部的行和另一行内部的文本都无效。所有关于行、容器、文本、InkWell、列等方面的排列组合，包括展开和灵活性，都失败了。 - ombiro

如果您在使用Column时这种方式不起作用，可以将Column包装在Flexible中。 - Isaac Oluwatemilorun

对于列和文本溢出的组合，这里有一个解决方法。行->扩展->您的列。答案中有更多细节。 https://stackoverflow.com/questions/65656774/flutter-text-overflow-on-column-widget - Raghu Mudem

Answer 2

使用省略号

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

---

使用淡入淡出效果

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

---

使用剪贴板

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

---

注意：

如果您正在Row中使用Text，您可以将上方的Text放入Expanded中，例如：

Expanded(
  child: AboveText(),
)

- CopsOnRoad

---

当文本溢出时，我可以添加一个扁平按钮，例如...更多链接吗？ - mr.hir

如果你在一行内有文本和另一个小部件（例如图标）居中对齐，这个方法就不起作用了。 - Lukasz Ciastko

"softWrap: false" 正是我需要的，谢谢！ - coldembrace

softWrap: false本质上是水平应用效果而不是垂直应用。我在省略号时没有注意到，但当切换到淡入淡出时，我需要它以便它不会淡化文本底部或仅仅无论如何都换行。 - kilkfoe

@user11908262，如果我没有看到代码，就无法帮助你。 - CopsOnRoad

Answer 3

< p >首先，将你的行（Row）或列（Column）包裹在Expanded小部件中。< /p >

然后

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

- Abdurahman Popal

---

是的，这是正确的方法，首先将Column包装在Expanded中确实起作用了！并且在Column子元素中使用Text。 - ArifMustafa

Answer 4

1. 剪辑

剪辑溢出的文本以适应其容器。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

2.fade

将溢出的文本淡化为透明。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ), 

输出：

3.ellipsis

使用省略号来指示文本已溢出。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

4.visible

将溢出的文本呈现在其容器外部。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

- Jitesh Mohite

Answer 5

您可以使用此代码片段来显示带省略号的文本

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

- Yauhen Sampir

---

请翻译英文至中文：同时请包括一个代码描述，以解释它是如何回答问题的。 - jkdev

Answer 6

你可以这样做

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

- Cenk YAGMUR

Answer 7

您可以通过首先将Column包装在Flexible或Expanded中，然后像往常一样使用Text，它将自动换行。

Container(
  child: Row(
    children: [
      Flexible(
        child: Column(
          children: [
            Text("This text is so long and long and long and long and long and that's why it is not wrapping to next line.")
          ]
        ),
      )
    ],
  ),
),

- Preety Kumari

---

你确定这是输出结果吗？ - Francisca Mkina

@FranciscaMkina 是的，这是我在我的设备上测试时看到的text输出，它出现在图像下方。 - Preety Kumari

我看到的是，为了保持单个项目的尺寸，您需要将文本限制在一定长度内。如果您输入非常长的文本，那么该项目将会像一条蛇一样变得很长。 - Francisca Mkina

Answer 8

如果一个 Text Widget 在一行中溢出，例如聊天消息可能是一行非常长的文本，可以通过创建一个 Container 和一个带有 maxWidth 的 BoxConstraint 来解决此问题。

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),

- Justin B

Answer 9

SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

只需将其包装在一个小部件内，该小部件可以采用特定宽度使其正常工作，否则它将假定父容器的宽度。

- chisom onwuegbuzie

Answer 10

行内的文本。

1. 第一列的文本优先于第二列

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very  long text in column 1 of Row",
      style: TextStyle(
          overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

2. 第二列文本优先于第一列

   Row(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: const [
        Flexible(
          child: Text(
             "This is very very  long text in column 1 of Row",
             style: TextStyle(overflow: TextOverflow.ellipsis,  backgroundColor: Colors.green),
          ),
        ),
       Text("This is very very  long text in column 2 of Row",
        style: TextStyle(overflow: TextOverflow.ellipsis, backgroundColor: Colors.yellow))
    ],
   )

3. 相同偏好

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(
            overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

栏内文本

定义maxLine属性。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very very very very very very very very very very very very very very very very  long text in Row 1 of Column",
      maxLines: 2,
      style: TextStyle(
          backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
    ),
    Text("This is very very  long text in Row 2 of Column",
        style: TextStyle(
            overflow: TextOverflow.ellipsis,
            backgroundColor: Colors.yellow))
  ],
)

注意：如果您的要求是在不超出限制的情况下显示整个内容，而不会破坏约束条件，请删除overflow属性，但保留Flexible不变。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

- BouncyBits