I came across a question that aligns perfectly with my current task - determining if text is truncated or not. The query can be found here: How can I check whether line-clamp is enabled?. It seems like my approach may not be accurate, so any guidance on how to achieve this would be greatly appreciated.
SCRIPT
const isExpanded = ref(true);
const isTextTruncated = ref(true);
const toggleCta = computed(() => isExpanded.value ? 'show' : 'hide' )
const information = ref(true);
const isTextTruncated = computed(() => {
const textLineCount = information.getClientRects().length;
const lineClampValue = information.css('-webkit-line-clamp');
if (textLineCount > lineClampValue) {
return true
}
})
TEMPLATE
<div ref="information" :class="isExpanded ? 'truncate': ''">
{{ data?.information }}
</div>
<span
v-if="isTextTruncated"
@click="isExpanded = !isExpanded"
>
{{ toggleCta }}
</span>
STYLE
.truncate {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
In my quest for solution, I referred to How can I check whether line-clamp is enabled?