How to programmatically enable the clamping of lines when it reaches the maximum amount of lines

[justlester]

Hi! I just want to ask how to know if the content reaches the maximum line being set. Let say for example I set the maximum to 5 lines and the text content has only 1 line. I wanted to enable clamping if it reaches more than 5 lines.

The content can be html or text.

  <div v-line-clamp="clampLines" style="word-break:normal!important;">
                        <span v-html="text"></span>
                    </div>
                    <v-divider v-if="clampLines"></v-divider>
                    <v-btn @click="toggleLines" text small block color="primary" class="font-weight-bold">
                        <template v-if="clampLines">Read More</template>
                        <template v-if="!clampLines">Read Less</template>
                    </v-btn>

a little help would be appreciated. Thanks!

[Frondor]

Sorry for the late reply. You need to set clampLines to 5 for that.

[xyzzyxyzzy0077]

Having the same question as I want to show a read more button only when the text exceeds the limit. Is there any way to do that?

[justlester]

Sorry for the late reply. You need to set clampLines to 5 for that.

Hi @Frondor, Sorry, my question is a bit confusing. What I meant to ask is how to dynamically detect text lines if it reaches the maximum clamp lines let say 5. I wanted to programmatically enable the clamping of lines when it reaches the maximum amount of lines.