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