如何在Flutter中使用省略号溢出多行文本？

Question

如何在Flutter中使用省略号溢出多行文本？

11

当我将一个文本小部件配置为最多1行，并将溢出设置为省略号时，小部件会正确显示。

 Text(
    "Last summer, I was working on a prototype for an AR app that would allow users to create
     virtual objects in real world spaces. I carried out the work using the Unity3D game engine.
     My last commit to the repository was five months ago.",
     maxLines: 1,
     overflow: TextOverflow.ellipsis
     )

然而，当我将最大行数设置为大于1的任何数字时，行数会正确限制，但溢出省略号不会显示。

 Text(
    "Last summer, I was working on a prototype for an AR app that would allow users to create
     virtual objects in real world spaces. I carried out the work using the Unity3D game engine.
     My last commit to the repository was five months ago.",
     maxLines: 2,
     overflow: TextOverflow.ellipsis
     )

如何配置Text小部件，在设置maxLines为多行时显示溢出省略号？

- matwr

1

当我最后一行可视化结束时，会发生这种情况。因此，在该行上没有文本被切断，也没有省略号显示，但是下一行中有更多的文本，并且应该显示省略号以通知文本已被切断。 - Apoleo

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Developer · Answer 1

请看下面的代码，它可能会对你有所帮助。

Text(
                      "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                      overflow: TextOverflow.ellipsis,
                      maxLines: 5,
                    ),

- alvinaprianto · Answer 2

这是因为文本的长度与现有空间匹配，所以没有截断文本。请尝试使用更长的文本进行测试。

"Last summer, I was working on a prototype for an AR app that would allow users to create virtual objects in real world spaces. I carried out the work using the Unity3D game engine. My last commit to the repository was five months ago. It happens because the length of the text matches the existing space so no text is truncated. Try to test with longer text. hello hello"

- Niaj Mahmud · Answer 3

一种方式

            Expanded(
            
              child: Text(
                "Last summer, I was working on a prototype for an AR app that would allow users to create virtual objects in real world spaces. I carried out the work using the Unity3D game engine. My last commit to the repository was five months ago.",
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
            ),

第二种方式

               Expanded(
                          child: Padding(
                            padding: const EdgeInsets.all(0.0),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [Text(
        "Last summer, I was working on a prototype for an AR app that would allow users to create
         virtual objects in real world spaces. I carried out the work using the Unity3D game engine.
         My last commit to the repository was five months ago.",
         maxLines: 2,
         overflow: TextOverflow.ellipsis
         )
                           
                              ],
                            ),
                          ),
                        ),

- Thắng Mai · Answer 4

在您的示例中，最大行数为3，但文本只显示了2行。这意味着您没有为最大行数提供足够的高度（例如其容器的高度）。

因此，您可以为其提供更多的空间，或将最大行数减少到2，或将文本小部件放置在Flex小部件中（如ListView等）。

您可以尝试这个来看看我的意思。

        Container(
          height: 100,
          child: Text(
            "Last summer, I was working on a prototype for an AR app that would allow users to create virtual objects in real world spaces. I carried out the work using the Unity3D game engine. My last commit to the repository was five months ago.",
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
        ),