Flutter - Truncate Text Using TextOverflow Examples

If you have a long text that doesn't fit in one line, one of the solutions is truncating the text. Flutter provides some modes for truncating overflowed text. It has an enum called TextOverflow whose possible values are:

• clip
• fade
• ellipsis
• visible

 

For example we are going to have a container with limited size. Inside, there is a text which cannot fit in one line. Then, we are going to use those TextOverflow modes to see the differences.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
    ),
  ),

Clip

Clip works by clipping the text outside container. It can clip in the middle of a word. Below is an example with softWrap sets to false.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.clip,
      softWrap: false,
    ),
  ),

Output:

Below is an example with softWrap sets to true.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.clip,
      softWrap: true,
    ),
  ),

Output:

Fade

Fade is used to show fading effects if the text is too long to be displayed. When softWrap is false, which means it's one-line, the fading effect is shown on the right-end of the container.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.fade,
      softWrap: false,
    ),
  ),

Output:

When softWrap is true, which means the text becomes multi-line, the fading effect is shown on the bottom-end of the container.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.fade,
      softWrap: true,
    ),
  ),

Output:

Ellipsis

Ellipsis mode adds triple dots at the end of visible text if the text is too long. It doesn't break in the middle of a word unless the word is longer than one line. In using ellipsis mode, it's important to set maxLines property because it uses the default max lines if you do not define it, even with softWrap sets to true.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.ellipsis,
      maxLines: 2,
      softWrap: true,
    ),
  ),

Output:

Visible

Using visible mode, the overflowed text is rendered outside the container. If softWrap is false, the overflow will occur in the same line.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.visible,
      softWrap: false,
    ),
  ),

Output:

Changing softWrap to true, there will be some lines outside the container.

  Container(
    color: Colors.lightBlue,
    width: 200,
    height: 45,
    child:const Text(
      'This is very longggggg. This is very longggggg. This is very longggggg',
      style: TextStyle(fontSize: 20),
      overflow: TextOverflow.visible,
      softWrap: true,
    ),
  ),

Output: