Skip to content
On this page

Truncate

Limiting long text.

Usage

Simple Usage

Lorem ipsum dolor sit amet ... preview
vue
<template>
  <p-truncate
    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, iste."
    length="30" />
</template>

Custom Omission

Lorem ipsum dolor sit am [...] preview
vue
<template>
  <p-truncate
    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, iste."
    length="30"
    omission=" [...]" />
</template>

Expandable

Lorem ipsum dolor sit amet ... Show Morepreview
vue
<template>
  <p-truncate
    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, iste."
    length="30"
    expandable />
</template>

Custom Text

You can change "show more" and "show less" text via prop show-more-text and show-less-text

Lorem ipsum dolor sit amet ... Lihat Selengkapnyapreview
vue
<template>
  <p-truncate
    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, iste."
    length="30"
    expandable
    show-more-text="Lihat Selengkapnya"
    show-less-text="Sembunyikan" />
</template>

API

Props

PropsTypeDefaultDescription
textString-Text to truncate
lengthNumber100Max length before text truncated
tooltipBooleantrueShow tooltip of fulltext
expandableBooleanfalseShow expand button
showMoreTextStringShow MoreText for show more's button
showLessTextStringShow LessText for show less's button

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
There no props here

Released under the MIT License.