I'm looking for a different text clamping solution than the regular one. I don't want it to be like this: Really long sentence ---> Really long.... Instead, I only want 3 dots displayed as .... I've already experimented with using
.truncate-text {
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
Are there any other approaches that could work?
Here's my code
<div class="w-12/12">
<p class="font-medium text-14 text-color-primary max-w-860 truncate-text">
<span v-for="tag in tags" :key="tag.id" class="pr-2">
#{{ tag.name }}
</span>
</p>
</div>