Very long text without spaces gives only '...' as a clamping result
See original GitHub issueReproduction steps:
- go to provided demo in a CodeOpen
- replace this line:
const text = 'Cook it up all night with Shitakes';
with this oneconst text = 'Proposal_for_a_Directive_COM_2016_450_final_of_7-May-2016_Money_No_Money_-short.pdf';
Issue Analytics
- State:
- Created 6 years ago
- Reactions:3
- Comments:12 (6 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’m working on this in a new branch here: https://github.com/bsidelinger912/shiitake/tree/truncate-single-word
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 theword-break: break-word
CSS, combined with new code in JavaScript that allows ellipses to be placed in the middle of a word.