0

Hello and thanks for any help, I'm trying to put an ellipsis at the end of a paragraph, it seems so easy to do in Flutter... but, in my case, it doesnt work with ellipsis.

It works as expected with TextOverflow.clip & TextOverflow.fade, I tried everything (put inside fixed container, flexible container...), and every, supossedly, working code I found seem to not work in my case, maybe a bug of 1.9? I have something like this:

Text(
  'Tree lines text for demostration puropuse,tree lines text for demonstration purpose, lines text for demostration puropuse',
  overflow: TextOverflow.ellipsis,
  maxLines: 3,
),

It works great with Text Overflow.clip & Text Overflow.fade but, with exactly the same environment, it doesn't work with Text Overflow.ellipsis.

Daniel
  • 1,007
  • 1
  • 11
  • 23
  • 1
    What is the width of your parent container? i.e. on a full width galaxy S8 there is not enough text to show the ellipsis. By adding more text I can confirm the ellipsis is showing on the third line as expected. – Yann39 Sep 14 '19 at 10:09
  • Hello Yann!, I reallized now I didnt mention I'm working in a Flutter Web project, maybe thats the problem here, will put the tag and explain in the main post (sorry), as I mentioned I did tried to put in sized container, what works with the other options (Clip and Fade dosent with Ellipsis.) – Daniel Sep 14 '19 at 10:12
  • 1
    Ah OK so I can't help here. Maybe take a look at [this](https://stackoverflow.com/questions/44579918/flutter-insert-overflow-ellipsis-in-text) but if it works with other options it may be a bug (also see [this issue](https://github.com/flutter/flutter/issues/33223). Cross browsers multiline ellipsis is impossible to do in pure CSS so maybe Flutter web have the same issue :/ – Yann39 Sep 14 '19 at 10:21
  • Thank you!, didn't seen [link](https://github.com/flutter/flutter/issues/33223) before, that would be the case :-) – Daniel Sep 14 '19 at 10:31

1 Answers1

1

The thing is you do not have required character to show elipsis. In another word, as name suggest your text is not overflowed to show elipsis. So, try by reducing maxLines: 3, to 1.

If you have specific character limit, you can check for the text length and add few dots by substring the text(And of course this is not preferable solution).

Blasanka
  • 21,001
  • 12
  • 102
  • 104
  • Hi and thanks Blasanka for you time ;-)... Well what you say is what would be the expected in the css world, but in flutter I was expecting a more intelligent behaviour,I dont want 1 line as I explained, what i would expect was a paragraph with three lines and at the end of the last line the three dots. – Daniel Sep 14 '19 at 09:57