question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multi-line TextBlocks should show ellipses when truncated

See original GitHub issue

Multi-line TextBlocks should match the behavior of single line ones when it comes to truncation – currently with the TypeScript renderer, no ellipsis is shown if multi-line text overflows. This will be needed for Bing API news cards to display properly.

Current: image

Desired: capture

This is difficult/impossible to do with pure CSS (text-overflow: ellipsis only works for single lines, and -webkit-line-clamp isn’t cross browser), so we might need to pre-truncate the text in JS. Will code up a prototype early next week.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
dclauxcommented, Apr 9, 2018

Sorry, I posted my question exactly at the same time as I got your response.

0reactions
khouzamcommented, Apr 11, 2018

After investigations, maxLines are respected but the ellipsis don’t show on iOS. Will need to fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Applying an ellipsis to multiline text [duplicate]
Because CSS has no property for ellipsis on multiline text, various workarounds have been created. Several of these methods can be found here:....
Read more >
Multi-Line Truncation with Pure CSS
An ellipsis (“…”) signifies that text has been truncated and continues longer than what it displayed. Using it is probably a pretty good ......
Read more >
Add an Ellipse to Truncated Text with CSS: Single-line and ...
Being able to truncate lines of text is fairly easy in CSS, you can explicitly set a width and height of a containing...
Read more >
How to Apply an Ellipsis to Multiline Text in CSS
In this article, we will see how to apply an ellipsis to multi-line text which can be done using two approaches. Ellipsis refers...
Read more >
Easiest Way to Truncate Text With Ellipsis in CSS
Learn to truncate overflowing text with ellipsis in CSS. Includes copy-paste code examples for both multiline and single-line ellipsis.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found