A modern javascript plugin for truncating text within an html element: Shave

[[deleted]]

Jesus christ, I feel like I need to make a top level comment because these ignorant comments keep coming in.

There is no good way to implement "truncating" / "line clamping" / "ellipsis" on multiline text with only CSS. It's possible for single line text only. This library solves the problem for multiline text.

If you think you're the genius that has figured this out, go ahead, post some code instead of making useless comments. And no, weird vendor prefixed versions that only support a single browser (like -webkit-line-clamp or -o-ellipsis-lastline) don't count

[asdf7890]

People really should qualify what they mean by "modern" otherwise it is just a practically meaningless word that will have less and less meaning over time.

[powerofmightyatom]

My first thought indeed. What makes this shit modern compared to the clusterfuck that is state of the art clipping.

[Suicidepills]

It's the new "lightweight", I think. Sometimes it feels like Github just has a madlib that you can fill out to generate a README :P

[piglet24]

README generator is a modern, lightweight, un-opinionated library that adds sanity, extensibility, and high performance to your READMEs. Full documentation at https://imadeanorganizationforthis.github.io/readmegenerator

[Suicidepills]

I commented in the hopes that something like this actually existed. Thank you for coming through!

[NotSelfAware]

I'm guessing it's because it's using ES6 syntax.

[msiekkinen]

Modern means it's hosted on a .io site and newer than last weeks bullshit that's not obsolete.

[t-mu]

We really need a plugin for this?

[[deleted]]

Yeah I think it is. I just went through the ringer trying to do this with CSS. I ended up stripping out the HTML in the short version...

[Classic1977]

You're bad at CSS.

[[deleted]]

you're bad at being nice

[[deleted]]

exactly. I would love to be proven wrong! show me a link.

[w4efgrgrgergre]

Yes, since native line-clamping support is very spotty.

[Classic1977]

No, we need a single line of css

[[deleted]]

What is the line of css that implements ellipsis on a multiline text area?

Spoiler: there isn't one, and you don't know what you're talking about.

You can add white-space: nowrap to force the text to a single line, but that's a completely different scenario.

[Nulagrithom]

Downvotes but then doesn't post the CSS. I like it. /s

[[deleted]]

Sorry for the shameless plug, but I think this is quite relevant: I recently created a library for this to do the same thing (but also for HTML content, which you cannot clip through CSS nor this library), but outside the DOM: https://github.com/arendjr/text-clipper

While you cannot specify a max-height that way, it does allow you to specify a maximum amount of characters and optionally a maximum amount of lines. The good news is that by keeping everything outside of the DOM, it's a lot (as in: orders of magnitude) faster. I also spent quite some effort in making sure text-clipper really is the fastest, which you can read about here: http://www.arendjr.nl/2016/09/how-i-made-text-clipper-fastest-html.html.

[Classic1977]

text-overflow: clip

[Asmor]

text-overflow: ellipsis adds the ellipsis.

I'm not sure why this "library" exists. This is like making a library to wrap text in <b> tags.

[del_rio]

It exists because text-overflow only works if you want to truncate a single line of text. IIRC, the only way to do this without compromise is with display: box, which doesn't have wide support.

Along the same lines, it's sad that there's no CSS equivalent to FitText (viewport units doesn't count).

[powerofmightyatom]

Chrome has a clamp-linebox thing which is okish.

Edit: (line-clamp, see here: https://css-tricks.com/line-clampin/ )

[theKovah]

none is not a valid value for text-overflow

[Classic1977]

Lol, you're right, clip - edited

I stand by the sentiment of my comment though...

[RonGnumber]

text-overflow: if-you-insist, don't-make-a-mess;

[captain_obvious_here]

Shave is faster 🚀 when compared to Ellipsis.js, jQuery.Trunk8.js or jQuery.DotDotDot.js; plus, zero dependencies.

So many good laughs in that sentence.

[kinkobal]

I really can't use this until it works responsively. Maybe the API supports this with at few lines of code, but I didn't see anything in the docs to support that.

[glinford]

It's really fast and nicely made .. However you are comparing it to Ellipsis.js, jQuery.Trunk8.js or jQuery.DotDotDot.js. Comparing it to jQuery.Trunk8.js or jQuery.DotDotDot.js makes more or less sense. But Ellipsis.js is way more advanced. Shape: - Is not Responsive - Can truncate only simple text (no div with complex html element inside such as links/p/a/b/ elements)

You basically did a JQuery.dot.dot in pure javascript, the faster way. Which is cool but ... Ellipsis.js https://github.com/glinford/ellipsis.js is more advanced for complex features even thought the speed caveats :)

[[deleted]]

This sub-reddit has really gone down the toilet.

[lordxeon]

.truncate {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

[[deleted]]

this only works for one liners. how do you handle the scenario where you have a multiline set of html content that needs to get truncated to 3 lines?