search

Justineo / vue-clamp

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

Produces Invalid HTML if wrapped in a <p> tag - source of hydration issues with SSR #53

Open TuringJest opened 3 years ago

TuringJest commented 3 years ago

Using v-clamp inside a <p> tag will generate invalid HTML as v-clamp will put a div wrapper around the text. In NUXT this will lead to hydration problems with SSR rendering even when the plugin is configured to ssr: false.

Why not use another span? Or add an option to choose the wrapper tag?

jibsaramnim commented 3 years ago

@TuringJest not the creator, but thought I'd chime in; there's already built-in functionality for this with a string property called tag. I think that's what you're looking for, right?

TuringJest commented 3 years ago

@jibsaramnim thanks for commenting. If I remember it correctly that didn't work because v-clamp will still render a div somewhere inside that tag. Unfortunately, if using <p> any <div> that appears somewhere nested will be invalid HTML and break NUXT's hydration.

jibsaramnim commented 3 years ago

@TuringJest oh really, that's odd. I just did a quick test on my end by placing a v-clamp inside a <p> and it seems to work without adding any div elements if I specify tag="span", I only see three span child-elements in the DOM. Sorry I can't be of more help :(.