Text Overflow in Flutter code not working

Question

I am trying to ellipsis the text in Flutter app but I am not able to set it.

I design the view as below

Positioned(
            bottom: 20,
            left: 10,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  snapshot.data.results[index].title,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
                Text(
                  snapshot.data.results[index].release_date,
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w400,
                      color: Colors.white,
                      letterSpacing: 1.2),
                ),
              ],
            ))

I have the same widget, but the accepted answer doesn't work. How did you do it ? — hungtran273, Sep 29 '21 at 11:52
Use Expanded Widgets if flexible is not working and set text overflow. If you want to every letter go with multiline. I would suggest — Ankit Tale, Sep 30 '21 at 19:23
I ended up using Column with mainAxisAlignment.end instead of Positioned. Thanks for replying — hungtran273, Oct 01 '21 at 09:05

score 12 · Accepted Answer · edited Mar 16 '20 at 12:16

12

You should wrap your text with Flexible or Expanded widgets like below:

    Flexible(child:Text("Text goes here"),

for more info try out this link

edited Mar 16 '20 at 12:16

Nidheesh MT

1,074
11
18

answered Mar 16 '20 at 12:13

Aamil Silawat

7,735
3
19
37

score 4 · Answer 2 · answered Mar 16 '20 at 12:17

4

I recently encountered something similar. If you inspect the constraints on the renderObject of your Text Widget using the DartDevTools, you are quite probably going to find the maxWidth constraint to be infinity. Therefore the Text Widget is not aware it is supposed to be wrapping (default behaviour) or appling ellipsis (in your case) to the text you provide.

The solution in my case was to wrap the Text Widget in an Expanded.

answered Mar 16 '20 at 12:17

artofbeinghuman

63
6

2

you could try to wrap the Text in a container with a fixed small width, to test whether ellipsis works in principle if the Text widget knows its maxWidth. This is no permanent solution however. – artofbeinghuman Mar 16 '20 at 12:57

Ali Altiyev · Answer 3 · 2022-12-26T11:38:20.420

You shuld wrap your widget with Expanded

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      ("Mortal Kombat"),
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Text(
                      ("12/10/2022"),
                      style:
                          TextStyle(color: Colors.black.withOpacity(0.4)),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    const Text(
                      ("Express yourself with a custom text design created just fo`r you by a professional designer. Need ideas? We’ve collected some amazing examples of text images from our global community of designers. Get inspired and start planning the perfect text design today."),
                      // style: TextStyle(overflow: TextOverflow.ellipsis),

                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],

It's important to not just post code, but to also include a description of what the code does and why you are suggesting it. This helps others understand the context and purpose of the code, and makes it more useful for others who may be reading the question or answer. — DSDmark, Jan 01 '23 at 13:09

Text Overflow in Flutter code not working

3 Answers3