TextOverflow.ellipsis for web with maxLines not working

[sumitasharma]

Hi,

I am having an issue with overflow: TextOverflow.ellipsis for web. I am unable to see ellipsis for my text. The code : return Container( alignment: Alignment.topLeft, child: StyledText( text: myText, newLineAsBreaks: true, maxLines: 2, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 15), styles: { 'bold': TextStyle( fontWeight: FontWeight.bold, fontSize: 15), 'italic': TextStyle( fontStyle: FontStyle.italic, fontSize: 15), 'n': TextStyle(fontSize: 15), }));

"myText" has multiline text in it. If I change maxLines to 1, I am able to see ellipsis, otherwise I am unable to see ellipsis on overflow of text. I also tried softwrap: false but that also didn't work. The above code works fine in Android but not in Web.

Thanks

[andyduke]

@sumitasharma Can you provide the output of the flutter doctor -v command and a minimal self-contained example code to reproduce this problem?

[sumitasharma]

@andyduke I have created a small code snippet similar to the card where I want to display my text. Looks like when I am using tags, it's not working but when I remove tags, it works. Note that for some reason the tags are not displaying in the view, but if you go into edit view for this message you will see the bold tags.

import 'package:flutter/material.dart';
import 'package:styled_text/styled_text.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    var myText = "<bold>The research claimed to have found</bold><n> evidence of an elusive subatomic particle Microsoft suggested could help the development of more powerful computers.But it now says</n> <bold>mistakes were made.</bold><n>The journal Nature has published a retraction. And the paper's authors have apologised for insufficient scientific rigour.\n\nBut the company has said it remains confident of its wider efforts on quantum computing</n>.";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(
                  child: Container(
                    width: 800,
                    height: 100,
            alignment: Alignment.topLeft,
            child: StyledText(
                text: myText,
                newLineAsBreaks: true,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 15), // default style
                styles: {
                  'bold': TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 15),
                  'italic': TextStyle(
                      fontStyle:
                      FontStyle.italic,
                      fontSize: 15),
                  'n': TextStyle(fontSize: 15),
                })),
        ),
      )
    );
  }
}

flutter doctor -v [✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Microsoft Windows [Version 10.0.19041.804], locale en-US) • Flutter version 1.23.0-18.1.pre at C:\src\flutter\flutter • Framework revision 198df796aa (5 months ago), 2020-10-15 12:04:33 -0700 • Engine revision 1d12d82d9c • Dart version 2.11.0 (build 2.11.0-213.1.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at C:\AndroidSDK • Platform android-29, build-tools 29.0.3 • ANDROID_HOME = C:\AndroidSDK • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04) • All Android licenses accepted.

[✓] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Android Studio (version 3.6) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin version 45.0.1 • Dart plugin version 192.7761 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[✓] VS Code (version 1.54.1) • VS Code at C:\Users\Amit Handa\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.20.0

[✓] Connected device (3 available) • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.182 • Edge (web) • edge • web-javascript • Microsoft Edge 89.0.774.45

• No issues found!

[andyduke]

@sumitasharma I'll see what the problem is.

You can style your code by enclosing it in triple backticks, like this: code.

[sumitasharma]

@andyduke I changed the above now. Thanks

[andyduke]

@sumitasharma I tested how TextOverflow.ellipsis works in the web version in Flutter 1.24 beta channel, there really is a problem that you are writing about. But in Flutter 2.0 this problem no longer exists, everything works as it should for both renderers (html and canvaskit).

[sumitasharma]

Thanks a lot for looking into this.