Flutter: How to crop text depending on available space?

Question

How to crop text depending on available space?

There's a similar question here, but there's no working answer.

Currently, this code

            return new GridTile(
              child: new Card(
                elevation: 3.0,
                child: new Container(
                  padding: new EdgeInsets.all(10.0),
                  child: new Column(
                    children: <Widget>[
                      Text(
                        document['title'],
                        style: new TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(
                        document['text'],
                      ),
                    ],
                  ),
                ),
              )
            );

Gives this result:

I tried using overflow: TextOverflow.ellipsis, but the text becomes 1 line long. Specifying the text line length is a bad idea, because on different screen sizes results will vary.

How to make so that the text crops, fits or wraps itself into available space?

Answer 1

Setting overflow behavior should do

  new Text(
    widget.text,
    // softWrap: true,
    overflow: TextOverflow.fade,
  )

See also Flutter: How to hide or show more text within certain length

Answer 2

Wrap the text widget Inside Expanded or Flexible widget and use overflow.ellipsis this worked for me

Column(
    children: <Widget>[
         Flexible(
             child: Text(
             "Some Very long Text or random generated strings ",
             overflow: TextOverflow.ellipsis,
             softWrap: true,
             ),
        ),
    ],
 ),

Answer 3

Try it:

extension StringX on String {
  String get overflow => Characters(this)
  .replaceAll(Characters(''), Characters('\u{200B}'))
  .toString();
}


Text(
 textString.overflow,
 overflow: TextOverflow.ellipsis,
 maxLines: 1,
)

It works for me.

source: https://github.com/flutter/flutter/issues/18761#issuecomment-812390920