v-html in vue-clamp

[mituller]

I see that this has been asked before in #13 and #14 but I don't see that there was an answer. I would like to know if there is a way to render html inside vue-clamp. I tried the same things as ChunAllen and they don't work, so if there is another way, please let me know.

[Justineo]

This will add a lot more complexity to how content is clamped. In current implementation there’s no way to use v-html. I left #13 open as a feature request but there’s no guarantee whether or when it will be supported yet.

[brmdbr]

@mituller Did you find a solution for this? I'm running into the same issue.

[mituller]

I never did. If I remember correctly, there was an issue with security if you added the html inside the clamp as I was trying to do. What I did instead was pretty simple. I just put the text in a div, and then had a button that changed the css for max-height from 4.5rem (could be anything) to none when clicked. So that way it looked like it expanded. I thought about looking at other solutions, but this was simple, light, and the client was happy with it.

So the div has this when the page is loaded:

.read-more {
    overflow: hidden;
    max-height: 4.5rem;
    margin: 0;
    padding: 0 1rem;
}

And then when a button is clicked, the max-height is set to none by adding a class to override the original. So where I had a class on the content div called .read-more, when the button was clicked, it added a class to the read-more div called expanded. Then there would be

.read-more.expanded {
    max-height: none;
}

and that would expand the content.

It's not perfect by any means, but worked for what I need. The downfall is that if the user changes the font size on the page. And so I added an overlay that faded to white so that it looked like the text faded out. Again, not ideal maybe, but works.

[brmdbr]

@mituller Thanks! didnt expect anyone to respond on this :). I guess I'm gonna try something similar after I have a shot at adding it here.