vue-truncate-collapsed

A simple Vue 2 Component that's truncate your text and adds a "Read Me/Show Less" clickable.

Getting Started

NPM

$ npm install vue-truncate-collapsed --save

Clone this repo

Clone or download the component and save in your own project.

Installing

ES6

import truncate from 'vue-truncate-collapsed';

new Vue({
  components: {
    truncate
  }
})

CommonJS

var truncate = require('vue-truncate-collapsed');

new Vue({
  components: {
    'truncate': truncate
  }
})

CDN

<!-- import JavaScript -->
<script src="https://unpkg.com/vue-truncate-collapsed"></script>

USAGE

Text

<truncate clamp="..." :length="90" less="Show Less" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et."></truncate>

Raw HTML

<truncate clamp="..." :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

Add class to Show More/ Show Less link

<truncate action-class="customClass" clamp="Show more" :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

Add class to collapsed text

<truncate collapsed-text-class="collapsed" clamp="Show more" :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

Attributes

Option	Default	Type	Description
truncated	false	boolean	The initial state of the truncation. true is collapsed, false is expanded.
text	no default value	string	The text that will be truncated.
length	100	number	Length of text after truncate.
clamp	Read More	string	Link that will be after the text with a link to expand.
less	Show Less	string	Link that will be after the text when it's expand, when click text collapses.
type	text	string	Either text or html. To change whether to treat the input from text attribute as text or raw HTML.
class	empty string	string	To add a class name to the link that will be after the text is expanded or collapsed.
collapsedTextClass	''	string	Allows you to add a class to the text when it is collapsed.

License

This project is licensed under the MIT License - see the LICENSE.md file for details