Closed maxkudla closed 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.
Actually the link "Read more" is that case... No link when HTML is clipped by maxLines
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.
The indicator is added only in case when
numChars> maxLength
.But if
numLines > maxLines
, it doesn't happen. It just closes the tags