Skip to content

Text overflow with ellipsis is weird and ugly by design #18761

Closed
@marcglasberg

Description

@marcglasberg

Latest update: #18761 (comment)


Internal: b/137284394

Here (#4478) Hixie commented:

"Ok the plan is that rather than truncating individual characters until it fit, we will truncate entire atomic positioned glyph sequences (e.g. whole ligatures or shaped words) until the ellipsis fits. That would have the advantage of being much more performant. It would have the disadvantage of truncating the entire word if the whole line was one ligature (e.g. if your line was the word "Zapfino" in the Zapfino font, and it overflowed at the "o", we would replace the whole thing with a "...", rather than just the "no".)"

Although the above comment talks about ligatures, it seems to me this is being ignored, and whole words are simply being removed.

Now suppose the text "Laboris nisi ut aliquip ex ea commodo" gets cut right before word "ex". Since the previous word fits, it may cut some letters of that last word to fit the ellipsis, resulting in:

"Laboris nisi ut aliqu..."

However, if the horizontal space is a litter smaller, than the letter "p" from "aliquip" won't fit, and it will cut the whole word, resulting in:

"Laboris nisi ut ... "

But that's not how overflow works for other platforms, and it makes no sense to remove whole words. The obvious result, if "p" doesn't fit should be, just as before:

"Laboris nisi ut aliqu..."

As things are now, we tend to see a lot of words cut in their last 1 or 2 chars, and a lot of words completely removed, leaving a lot of weird white space. That gets particularly nasty in one line texts like titles.

Please, don't create weird behaviors for things with time-honored traditions like ellipsizing. Stick to what everybody else does. If you want, let the devs choose between both behaviors: enum TestOverflow {clip, fade, ellipsisWords, ellipsisLetters}.

If Arabic and other eastern languages have problems with that (as per issue 4478), you can even do some autodetection for characters of those languages, by adding the enum TestOverflow.ellipsisAutodetect.

Activity

sir-boformer

sir-boformer commented on Jun 25, 2018

@sir-boformer
Contributor

I agree with you, the current ellipsis often looks out of place, especially in languages like German with long words:

E-Mail an das Straßenverkehrsbundesamt schicken --> Email an das ...

HannoOttens

HannoOttens commented on Aug 29, 2018

@HannoOttens

This is an issue for me aswell.
I have some right-aligned text that frequently overflows, resulting in a large white gap between the ellepsis and the right side of screen. This looks very odd.

josvos

josvos commented on Oct 4, 2018

@josvos

+1 here... ellipsis on just word boundaries and leaving (much) space unused after the ellipsis is not the right way, IMHO, at least not for small texts (e.g. labels in buttons, etc.). Please change this, optionally by adding ellipisChars or so to let devs choose (not needed for me, but if the word boundary is needed too).

ConProgramming

ConProgramming commented on Dec 4, 2018

@ConProgramming

Yeah I have an email in A Text widget and the entire email gets cut out

added
frameworkflutter/packages/flutter repository. See also f: labels.
on Dec 4, 2018
added this to the Goals milestone on Dec 4, 2018
sir-boformer

sir-boformer commented on Dec 4, 2018

@sir-boformer
Contributor

You can try this as a workaround. Not sure if it also works with ellipsis.

      Text(
        email,
        maxLines: 1,
        overflow: TextOverflow.fade,
        softWrap: false,
      );
added
engineflutter/engine repository. See also e: labels.
on Jan 2, 2019
JonasJW

JonasJW commented on Jan 9, 2019

@JonasJW

@sir-boformer sadly TextOverflow.ellipsis doesn't work like this but that is the way it should work in my opinion. Just replace the letters which are fading with '...'.

Hixie

Hixie commented on May 1, 2019

@Hixie
Contributor
lukepighetti

lukepighetti commented on Jul 10, 2019

@lukepighetti
Contributor

TextOverflow.ellipsis should work on vertical overflow, cut off the last word(s) and replace with ...

edit: I found out later that if you set maxlines it overflows appropriately, but it would be nice if it sensed maxlines based on it's parent container

1343

1343 commented on Jul 12, 2019

@1343

Some issue I am also facing, if some word is fitting it's replacing the complete word

Text(  
 'Sachin Ramesh Tendulkar ',
   softWrap: false,
   maxLines: 1,
   overflow: TextOverflow.ellipsis,
   style: new TextStyle(
     fontSize: 13.0,
     fontFamily: 'Roboto',
     color: new Color(0xFF212121),
     fontWeight: FontWeight.bold,
   ),
 )

If er is not wraping it's removing complete tendulkar word and putting ... final text Sachin ramesh ..

183 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: annoyanceRepeatedly frustrating issues with non-experimental functionalitya: typographyText rendering, possibly libtxtcustomer: alibabacustomer: bytedancecustomer: chalk (g3)customer: crowdAffects or could affect many people, though not necessarily a specific customer.customer: dream (g3)customer: money (g3)dependency: skiaSkia team may need to help usengineflutter/engine repository. See also e: labels.found in release: 1.22Found to occur in 1.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Moncader@kamilpowalowski@zoechi@pph7@Hixie

        Issue actions

          Text overflow with ellipsis is weird and ugly by design · Issue #18761 · flutter/flutter