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?

Flex

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. – Becket

Answer 1

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

Glee

Answer 2

You have to use

Sized Box 

Widget to fix height and width of Text.

example

SizedBox (height: 100,Width: 400,child:Text('abcd'),),

for heading and sub-heading.

then inside your column you can use

mainAxisAlignment:MainAxisAlignment.spaceEvenly,

for making them in line (in case of mediaQuery)

use crossAxisAlignment for making it look cool

crossAxisAlignment:CrossAxisAlignment.start,

Also you can use AutoSizeText Widget from https://pub.dev/packages/auto_size_text to it will fit according screenshot:

Code :-

SizedBox(width: 400,
child: AutoSizeText(
 'abcd',
style: TextStyle(
fontWeight: FontWeight.bold, 
fontSize: 20,
),
overflow: TextOverflow.ellipsis,
 maxLines: 1, 
),
),

if you need more help, leave a comment!.

Insistent

Answer 3

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"

Handler

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. – Southerly

Answer 4

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

Erl

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. – Flex

@Flex did you find a solution in the end? – Watery