Multi-line element truncation
Does anyone know how to achieve the same effect as this library: https://github.com/patrik-piskay/react-truncate-markup
It's a library for truncating across multiple lines, something which isn't really possible with CSS.
It works by traversing the children of
TruncateMarkup, removing certain elements, and testing if the content fits with those elements removed, repeating the process until it succeeds.
I'm trying to convert it to Solid, but am having some trouble, since React.cloneNode is used to produce truncated subtrees. AFAICT the Solid equivalent would be cloning DOM nodes, but that would detach their listeners and wouldn't be reactive.
Maybe the Solid alternative would be to remove existing nodes that are reactive rather than create new nodes? Would require some ingenuity but I'm not aware of a better solution.GitHub
GitHub - patrik-piskay/react-truncate-markup: ✂️ React component fo...
✂️ React component for truncating JSX markup. Contribute to patrik-piskay/react-truncate-markup development by creating an account on GitHub.
7 Replies
If you don't need the stuff with custom
read more ellipsis, I would suggest going the modern CSS way, since -webkit-line-clapm is well supportedYe we do need the ellipsis stuff + will probably have arbitrary components in there at some point too
What about
1. Render markup in a container
2. Walk the children and create tree in js
3. Hide with
display: hidden
4. Measure if it fitsMinus the
display: hidden is how the original library already works anyway, it's just a matter of preserving reactivity while truncating the elements. In Solid removing elements from the original tree seems like the only solution compared to cloning the JSX nodes into a new tree in Reactcurious if u ended up with something workable
Settled on a simpler solution that only allows a text child, rather than arbitrary elements. Uses a linear search rather than a binary search atm so it's a bit slower https://playground.solidjs.com/anonymous/1ec170c7-6035-4987-aa2e-8cd988fd953a
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
nice 👍