Flutter web Text Widget overflow not working as intended

[icatalud]

The Text overflow in flutter web does not work for multiple lines.

For example by placing the following widget in the body of the Scaffold from the initial web project:

Container(
  width: 150,
  child: Text(
    'Hello, World! super length textbox why does it not go beyond 1 lines? It beats me, what is going on, it doesn't work, it's not my fault. But why? why is it? I cannot understand',
    overflow: TextOverflow.ellipsis,
    maxLines: 2,
  ),
),

It does not show the ellipsis (...), however by changing maxLines to 1 it works. By using the exact same code on regular Flutter, it works as intended. It's a Flutter Web issue.

I tried different placements for the Text Widget and in every use case I got the same behavior, maxLines > 1 breaks the overflow logic.

[saravananmnm]

Can you try this wrap the text

ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.5),
child: Wrap(alignment: WrapAlignment.end, children: [
new Text(subTitle ?? null,
textScaleFactor: textSize ?? null,
overflow: TextOverflow.clip,
softWrap: true,
maxLines: 2,
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black54)),
]),
),

[icatalud]

Another exception was thrown: TypeError: Instance of 'minified:aZ': type 'minified:aZ' is not a subtype of type 'minified:dv'

It didn't work. In any case, I think Text is not currently working as intended. It should be the same as in Flutter.

[mdebbar]

This is a limitation of the current implementation of text rendering.

I'm working on a new implementation that fixes this issue among others. It's still work-in-progress, you can try it by setting this flag to true. Please give it a shot and let us know if that works for you.

[icatalud]

That worked, thank you. I hope you get the official Text version working correctly soon.

Steps to get ellipsis working:

• import 'package:flutter_web_ui/src/engine.dart' show TextMeasurementService;
• (somewhere in the code) TextMeasurementService.enableExperimentalCanvasImplementation = true;

[deckerst]

@mdebbar is there a way to set this flag when working with the unforked flutter web?

[mdebbar]

Unfortunately, after the unfork, there's no easy way to make changes in the web engine (which is where the flag lives). Your best bet currently is to wait until the new implementation is ready and isn't experimental anymore. I'll be spending some time on it in the coming weeks, but I don't have an exact date for when it'll be done.

[ymback]

Any news?

[McLarenCollege]

@mdebbar I'm really looking forward to this fix :) if it's not likely to be fixed soon, it would be great if you could temporarily expose the enableExperimentalCanvasImplementation flag in the web engine

[deckerst]

Freshly available (haven't tried yet):
flutter run -d web-server --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

[mdebbar]

Thanks @deckerst 😄

@McLarenCollege try the command that @deckerst suggested. It was added in flutter/engine#13929 that was merged yesterday. Please file issues if you encounter any, and make sure to mention in your issue that you are using this flag :)

[McLarenCollege]

Yay it's working now! thank you for such a fast response

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.