Long text is not displayed correctly when using ellipsis overflow in Flutter
1 min read

Long text is not displayed correctly when using ellipsis overflow in Flutter

Text that uses ellipsis as overflow option could be displayed wrongly.

I was working with a list of single line Text widgets in Flutter, and I noticed that the text was not displayed properly.

For instance

Text(
    "A very long text_that_is_too_long_for_the_width_of_this_widget",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
)

resulted in something like

A very long...

when the expected result was something like

A very long text_that_is_too_long_for...

There seems to be a bug in Flutter, opened in June 2018, that hopefully will be fixed soon.

As suggested by a contributor I decided to use TextOverflow.fade, instead of using workarounds that will only make the code more complicated, compared to a small change in the design.

Wanna stay up-to-date with Flutter and Dart?

Subscribe to get a weekly email with the best articles about Flutter and Dart.

    We won't send you spam. Unsubscribe at any time.