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.

Very long text without spaces gives only '...' as a clamping result

See original GitHub issue

Reproduction steps:

  • go to provided demo in a CodeOpen
  • replace this line: const text = 'Cook it up all night with Shitakes'; with this one const text = 'Proposal_for_a_Directive_COM_2016_450_final_of_7-May-2016_Money_No_Money_-short.pdf';

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:3
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

bsidelinger912commented, Sep 2, 2017
ziothcommented, May 26, 2020

I don’t think white-space: nowrap makes sense for Shiitake, because the whole point of Shiitake is that it lets you clamp to multiple lines. If you just want one line, ordinary CSS is far better and more performant. However, there is a bug here, where a long single word is transformed to ellipses and nothing else.

I think a better feature than the requested truncate property would be the ability to break in the middle of a word, if that word fills the whole line. This could be done with the word-break: break-word CSS, combined with new code in JavaScript that allows ellipses to be placed in the middle of a word.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to handle long text overflow with pure CSS (truncate ...
A complete guide explaining how to utilize pure CSS properties to truncate and wrap long overflowing text.
Read more >
Forcing a long line of text (without spaces) to line break ...
We would like to force this to line break (even mid word) according to the css specified width (width:100px) of the parent container....
Read more >
Handling Short And Long Content In CSS
For this technique to work, display: -webkit-box must be used. The -webkit-line-clamp specifies the maximum number of lines for the truncation ...
Read more >
text-overflow - CSS: Cascading Style Sheets - MDN Web Docs
The text-overflow property only affects content that is overflowing ... If there is not enough space to display the ellipsis, it is clipped....
Read more >
Line Clampin' (Truncating Multiple Line Text)
That's "line clamping" and it is a perfectly legit desire. ... ellipsis at the end of the lines but only if the text...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found