How to use an ellipsis overflow with multiline Text in Flutter

user_3320996 0
Viewed 3234

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
     )

enter image description here

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.

enter image description here

 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?

flutter-web dart flutter
2 Answers

Find below code , it might help you.

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

Output

user_156602240

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