How to use an ellipsis overflow with multiline Text in Flutter

Question

When I configure a Text widget with a maximum of 1 line and an overflow set to ellipsis, the widget shows correctly.

 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
     )

However, when I set the maximum number of lines to any number higher than 1, the number of lines is limited correctly, but the overflow ellipsis does not show.

 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
     )

How can I configure the Text widget to show the overflow ellipsis when more than one line is set for maxLines?

It happens to me when the last visualized line ends in a new line. So no text is cut on that line and no ellipsis is shown, however, there is more text in the next line and it should show the ellipsis to inform that the text is cut. — Apoleo, Jan 26 '22 at 19:57

score 0 · Answer 1 · answered Jun 25 '23 at 10:13

one way

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

Way two

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

score 0 · Answer 2 · answered Aug 09 '23 at 15:23

0

It happens because the length of the text matches the existing space so no text is truncated. Try to test with longer text

Try with this 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. 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"

answered Aug 09 '23 at 15:23

alvinaprianto

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 14 '23 at 06:37

score -1 · Answer 3 · answered Mar 01 '20 at 04:40

In your example, the maximum lines is 3 but the text just show 2 lines of text. It means you dont provide enough height for maximum lines (like the height of it's container).

So you can provide more space for it or reduce maximum lines to 2 or place the text widget in Flex widgets (like ListView, ...)

You can test this one to see what i mean for

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

This was an error in my post, it should have said 2 lines for that example. I've edited to the right number. However, whichever number I use above 1 the overflow ellipsis is not showing. — matwr, Mar 01 '20 at 08:41

How to use an ellipsis overflow with multiline Text in Flutter

3 Answers3