Flutter - Wrap text on overflow, like insert ellipsis or fade

flutter dart text flutter-layout

315,440

Solution 1

You should wrap your Container in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.

Flexible(
  child: new Container(
    padding: new EdgeInsets.only(right: 13.0),
    child: new Text(
      'Text largeeeeeeeeeeeeeeeeeeeeeee',
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        fontSize: 13.0,
        fontFamily: 'Roboto',
        color: new Color(0xFF212121),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

Solution 2

Using Ellipsis

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

Using Fade

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

Using Clip

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

Note:

If you are using Text inside a Row, you can put above Text inside Expanded like:

Expanded(
  child: AboveText(),
)

Solution 3

First, wrap your Row or Column in Expanded widget

Then

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

Solution 4

You can use this code snipped to show text with ellipsis

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

Solution 5

1. clip

Clip the overflowing text to fit its container.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Output:

2.fade

Fade the overflowing text to transparent.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Output:

3.ellipsis

Use an ellipsis to indicate that the text has overflowed.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Output:

4.visible

Render overflowing text outside of its container.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Output:

Please Blog: https://medium.com/flutterworld/flutter-text-wrapping-ellipsis-4fa70b19d316

View more solutions

315,440

rafaelcb21

Updated on April 24, 2022

Comments

rafaelcb21 about 2 years

I'm trying to create a line in which center text has a maximum size, and if the text content is too large, it fits in size.

I insert the TextOverflow.ellipsis property to shorten the text and inserting the triple points ... but it is not working.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

result:

expected:

DarkTrick almost 2 years

The title and content of this question don't match. Your expected result shows ellipsizing. However, the title states wrap and fade. Please adjust you title so it matches your actual question. It confuses this question: stackoverflow.com/questions/51930754/flutter-wrapping-text

Michael Tedla over 5 years

I have a similar problem on Column. This approach isn't working for me. stackoverflow.com/questions/52206221/…
jkdev over 5 years

Also please include a description of this code to explain how it answers the question.
mr.hir over 5 years

can i add when text overflow then add a flat button like ...more link
mangkool over 4 years

are there any way we could implement this in textfield?
Lukasz Ciastko over 4 years

This doesn't work if you have text and another widget (e.g. icon) centred inside a row.
ArifMustafa over 4 years

Yes, this is the right way, first wrapping the Column inside the Expanded really worked! and to use the Text inside the Column children.
coldembrace almost 4 years

softWrap: false is exactly what I needed, thanks!
martinseal1987 almost 4 years

if you want it to also have the text wrap_content specify the fit property with FlexFit.loose,
Nithin Sai almost 4 years

Hey, what if we want to add, for example, a new page with the text that is overflowing?
ombiro over 3 years

This approach does not always work. In my case, all the TextFlow props like elipsis or fade or clip do not work for a text inside an InkWell and insided a row and another row. All permuttations on row, container, text, inkwell, column etc with expanded and flexible FAIL.
kilkfoe over 3 years

softWrap: false essentially says apply the effect horizontally instead of vertically. I didn't notice with the ellipses, but when switching to fade I needed it so it didn't fade the bottom of the text or just wrap anyway
CopsOnRoad over 3 years

@kilkfoe That's why you need to provide maxLines as mentioned in the answer.
user11908262 over 3 years

Hay @CopsOnRoad I have customeTile brother TextOverflow.ellipsis is not working even i used softWrap: false and also limit maxLine to 1 still my text overflow from side.
CopsOnRoad over 3 years

@user11908262 I can't help you without seeing the code.
Sabito 錆兎 stands with Ukraine over 3 years

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted.
user3808307 over 3 years

What to import here. 'package:assorted_layout_widgets/assorted_layout_widgets.dar‌t'; doesn't work
Amit Verma about 3 years

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive feedback/upvotes from users, when the code is explained.
Isaac Oluwatemilorun about 3 years

If this approach does not work for you when you use Column, wrap the Column in Flexible
Kamlesh almost 3 years

Thanks a lot @IsaacOluwatemilorun It worked like charm. Flexible -> Column -> Text().
mLstudent33 over 2 years

Also wrapping the Text with Flexible and wrapping Flexible with a Column or Row seems to work.
Francisca Mkina over 2 years

Are you sure this is the output?
Preety Kumari over 2 years

@FranciscaMkina Ya its the output for the text you are seeing below the image when I have tested on my device.
Francisca Mkina over 2 years

What I see is for you to maintain the dimensions of that single item, you need to keep your text limited to a certain length. If you put the very long text, that one item is going to be long like a snake.
Raghu Mudem about 2 years

For column and text overflow combination, here is a clue to solve. Row->Expanded->Your Column. here is more details in the answer. stackoverflow.com/questions/65656774/…
markhorrocks about 2 years

Named parameter textOverflow should be overflow.
prawito hudoro almost 2 years

I try to use Expanded and it does not work, but when I try to use Flexible to wrap my Column, now it works. Thanks.