arendjr / text-clipper

Fast and correct clip functions for HTML and plain text
MIT License
133 stars 13 forks source link

There is no indicator when the number of maxLines has reached #17

Closed maxkudla closed 2 years ago

maxkudla commented 2 years ago

The indicator is added only in case when numChars> maxLength. image

But if numLines > maxLines, it doesn't happen. It just closes the tags image

arendjr commented 2 years ago

Thanks for the report! This behavior is actually intentional, because it would look kinda weird if there’s a new line with just ellipses, while adding the ellipses to the text before the newline is also weird. However, it does assume there is an additional visual indicator (such as a “Read more” link) so that the truncation is still obvious to the user.

What’s your use case? I can imagine it makes sense to make this behavior configurable.

maxkudla commented 2 years ago

Actually the link "Read more" is that case... No link when HTML is clipped by maxLines

arendjr commented 2 years ago

Ah, I see. That actually makes sense, but it’s not really how the indicator was intended to be used. In that case, why not write it like this:

let clippedText = clip(text, 80, { maxLines: 3 });
if (clippedText.length < text.length) {
    clippedText += readMoreLink;
}

This is very close to how I used it myself (except I’d use JSX to insert the link).

I think this makes for a clearer text experience, because you’ll still get ellipses when the text is clipped mid-paragraph (instead of running straight into the Read more link), while you would get a clean stand-alone Read more link if the text is clipped at a line break.

arendjr commented 2 years ago

Please note the README also already mentions this behavior:

Note the indicator is only inserted when the clipping doesn't occur at a line-break.

So I hope the above work-around will suffice for you. Feel free to reopen if it doesn’t.