Truncate

Limiting long text.

Usage

Simple Usage

Lorem ipsum dolor sit amet ... preview

<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

<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

<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

<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

Props	Type	Default	Description
text	String	-	Text to truncate
length	Number	100	Max length before text truncated
tooltip	Boolean	true	Show tooltip of fulltext
expandable	Boolean	false	Show expand button
showMoreText	String	Show More	Text for show more's button
showLessText	String	Show Less	Text for show less's button

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here