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

[elbrus]

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';

[bsidelinger912]

This makes sense for sure. Since Shiitake doesn't truncate words, I'm not really sure what behavior would be desired in this situation.

One option is to add a prop "truncate" which would default to false, but passing true would truncate the last word. Would that cover your use case @elbrus?

I'm definitely open to other behaviors too. Another thought is that if we only truncate when we're down to a single word and in the scenario where we'd otherwise only show the ellipsis.

[elbrus]

@bsidelinger912, yes, adding truncate in a way you suggested would help me. But it's up to you to decide, do you want to truncate words in your lib.

[bsidelinger912]

I'm working on this in a new branch here: https://github.com/bsidelinger912/shiitake/tree/truncate-single-word

[tmaconnelly]

Hello! Thank you for this library as it has been very helpful in our project.

Wanted to swing back to this thread, as I am facing the same issue with Japanese text.

I see that the branch you mention is still out there, and wanted to see if you have any recommended work-arounds for this issue?

Thanks!

[bsidelinger912]

Hey @tmaconnelly I've been on the fence about this, but recently had reason to make the change for my day job, so it's back on my radar. I don't have a workaround but I do plan to add support for it soon and will actually be able to work on it during my normal work hours, which helps a lot.

[bsidelinger912]

@elbrus @tmaconnelly, I just realized that this should be totally doable with CSS, as long as you want the text to be on one line. I'm kicking myself for not realizing this earlier, I was just so focused on javascript answers I didn't even think about the obvious CSS one. Basically you should be able to use:

white-space: nowrap;
text-overflow: ellipsis;

and some type of max-width or other layout to restrict the container from getting too wide. Feel free to create a codepen example of your layout and I can confirm that the css solution works.

That is, unless you're wanting the text to wrap to two lines (or more) then truncate, in which case javascript would be needed, and I'd still be open to adding support in Shiitake.

[elbrus]

@bsidelinger912 you're right about one liners, I'm using CSS for it already my original problem was with multiple lines, sorry somehow forgot to mention about it

[bsidelinger912]

@elbrus, makes sense. Sorry for the major lag on this, are you still needing it or have you grown tired of waiting? Any one else that sees this issue, please chime in if this is something you need.

[elbrus]

Would be nice to have, but not very important anymore :)

[ant-plotnikov]

Hello @bsidelinger912 ! Seems I faced same issue as above, will you be merging the branch with single-word truncation?

[bsidelinger912]

Hey @ant-plotnikov sorry for the lag on this. I'm still not sure this is a use case I want to support as it is basically a pretty different truncation routine that isn't something I intended for when creating the library. If other folks are reading this and wanting the feature please upvote the orig issue or comment, Thanks!

[zioth]

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.