search

Justineo / vue-clamp

Clamping multiline text with ease.
https://vue-clamp.vercel.app
MIT License
697 stars 89 forks source link

Clamp tags! #57

Open helsonxiao opened 3 years ago

helsonxiao commented 3 years ago

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 commented 3 years ago

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 (#50) maybe we should figure out what do we intend to support in the end.
helsonxiao commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.