How to forcefully truncate long uninterrupted strings?

[fchristant]

I'm not yet sure whether this is an issue, or me misunderstanding trunk8. Here's a simple test case:

<span data-truncate="true" data-truncate-lines="2">Thisisalongtextthatwillbetruncatedto2linesexactlybutnotmore</span>

As you can see, it's a simple span with a very long string in it, uninterrupted, so without spaces. Here's my trigger:

$('[data-truncate="true"]').each(function( index, element ) {
        $(element).trunk8({
            lines: $(this).data("truncate-lines")
        });
    });

If I would now constrain the width of that span, I'd expect that long word to be broken, so that truncation works. However, this is not happening. The long string is overflowing the container instead.

I can solve this in CSS using overflow:hidden but that looks a lot uglier than a true truncation. I am wondering if the scenario I describe is supposed to work? Am I doing something wrong?

[Spoowy]

Great, having the same issue here.

[rviscomi]

Hey guys, sorry I missed this initially. The problem is that without spaces, the text has no natural breakpoint so it overflows by default. You will need some CSS on the span to break the text mid-word. That way, the text will wrap to multiple lines and trunk8 will be able to cut it off at the perfect spot.

Here's a jsfiddle to demonstrate the solution: https://jsfiddle.net/eve2bbm9/