<p dir="auto"><em>Latest update: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="335129461" data-permission-text="Title is private" data-url="https://github.com/flutter/flutter/issues/18761" data-hovercard-type="issue" data-hovercard-url="/flutter/flutter/issues/18761/hovercard?comment_id=1513592402&amp;comment_type=issue_comment" href="https://github.com/flutter/flutter/issues/18761#issuecomment-1513592402">#18761 (comment)</a></em> </p>
<hr>
<p dir="auto">Internal: b/137284394</p>
<p dir="auto">Here (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="159298199" data-permission-text="Title is private" data-url="https://github.com/flutter/flutter/issues/4478" data-hovercard-type="issue" data-hovercard-url="/flutter/flutter/issues/4478/hovercard" href="https://github.com/flutter/flutter/issues/4478">#4478</a>) Hixie commented:</p>
<p dir="auto"><em>"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".)"</em></p>
<p dir="auto">Although the above comment talks about ligatures, it seems to me this is being ignored, and whole words are simply being removed.</p>
<p dir="auto">Now suppose the text <code class="notranslate">"Laboris nisi ut aliquip ex ea commodo"</code> gets cut right before word <code class="notranslate">"ex"</code>. Since the previous word fits, it may cut some letters of that last word to fit the ellipsis, resulting in:</p>
<p dir="auto"><code class="notranslate">"Laboris nisi ut aliqu..."</code></p>
<p dir="auto">However, if the horizontal space is a litter smaller, than the letter <code class="notranslate">"p"</code> from <code class="notranslate">"aliquip"</code> won't fit, and it will cut the whole word, resulting in:</p>
<p dir="auto"><code class="notranslate">"Laboris nisi ut ...          "</code></p>
<p dir="auto">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:</p>
<p dir="auto"><code class="notranslate">"Laboris nisi ut aliqu..."</code></p>
<p dir="auto">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.</p>
<p dir="auto">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: <code class="notranslate">enum TestOverflow {clip, fade, ellipsisWords, ellipsisLetters}</code>.</p>
<p dir="auto">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 <code class="notranslate">TestOverflow.ellipsisAutodetect</code>.</p>
<p dir="auto">Repro:</p>
<ul dir="auto">
<li>Run widgets/pageable_list.dart</li>
<li>Tap the menu button in the top left to open the drawer.</li>
<li>Tap <em>Vertical Layout</em>.</li>
</ul>
<p dir="auto">Note that the vertical layout takes effect, but the <em>Vertical Layout</em> DrawerItem is not selected.<br>
If you open and close the drawer, then it will be correctly selected.</p>