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

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

Truncate ​

Usage ​

Simple Usage ​

Custom Omission ​

Expandable ​

Custom Text ​

API ​

Props ​

Slots ​

Events ​