Flutter - Wrap text on overflow, like insert ellipsis or fade
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, ), ), ),),
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(),)
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),),