Expanded text showing

[steven-twerdochlib]

Hi,

I'm currently using this code to allow the user to minimise long text:
<template v-if="expanded"> <div class="clamp-section"> <a @click="toggleClamp">Read less</a> </div> </template>

The issue I'm having is that 'Read less' appears for text that isn't above the maximum number lines but I need to expand the text for ones that are and (as far as I know) there's no way for me to know if the text is above the maximum number of lines or not.

[ivestszheng]

Hi,

I'm currently using this code to allow the user to minimise long text: <template v-if="expanded"> <div class="clamp-section"> <a @click="toggleClamp">Read less</a> </div> </template>

The issue I'm having is that 'Read less' appears for text that isn't above the maximum number lines but I need to expand the text for ones that are and (as far as I know) there's no way for me to know if the text is above the maximum number of lines or not.

You can use slot scope.Here's my example.
const expanded = ref(false) <text-clamp text="looooooooooooooooooooooooooooooong text" :max-lines="2" v-model:expanded="expanded" > <template #after="scope"> <span v-if="scope.clamped" class="toggle-btn" @click="expanded = true" >Expand</span > <span v-if="scope.expanded" class="toggle-btn" @click="expanded = false" >clamp</span > </template> </text-clamp>

You probably know how to make it already. Hope it can help other people.