Clamp tags!

[helsonxiao]

This repo is so great. Thanks to your work! We found it because there is a tags-clamping feature in our product. Since we haven't found any vue component supports tags-clamping, we reimplemented vue-clamp. I hope our codes could be merged into master branch so I submit this issue.

Let me explain the main changes:

1. Manipulate DOM nodes directly only works for simple text and will cause tags state getting into a mess, so we create invisible DOM nodes for clamped text/tags offset calculation.
2. Due to 1, no more applyChange method, we only need to design a proper workflow in Vue style for offset updating. Then just let Vue handle the DOM updating!
3. Due to 1 again, this logic can also work in React or other VDOM libraries. I have made a reference to ant-design in utils.js.

Fork repo: https://github.com/boyuai/vue-clamp
Demo: https://boyuai.github.io/vue-clamp/demo/

[Justineo]

I think decoupling the measure process implementation with Vue is a good idea. Some thoughts:

1. The forked version only handles top level text/element nodes so if we have an element with long text content into it will be dropped completely whenever only a little portion of it should be clamped (which is expected in your case for tag clamping, but maybe not in other use cases).
2. We do have an open PR for raw HTML support (raw html support #50) maybe we should figure out what do we intend to support in the end.

[helsonxiao]

Raw HTML support is fancy but I don't think it can cover tag clamping usage (or something with fixed height).

I've searched numLines++ in text-clipper repo. From what I see, numLines only increases if there is any character/tagName in whitelist(block level tag, <br />, \n, ...).

Anyway, thanks for your advises! I'll wait for raw html support currently.

[Justineo]

I don't think it can cover tag clamping usage

Yes. That's why I said we need to discuss more to figure out what the final API should look like and what feature set should be supported.

[helsonxiao]

maxLines in text-clipper is totally different from maxLines in vue-clamp. Maybe both of them can be provided. Tags clamping needs an extra lineHeight, but it still insists the rule(A real line! hhh).

Honestly, I have no idea. Waiting for a solution.