Truncate Long Text To A Single Line – expandable-text-line

Install & Download:

# Yarn
$ yarn add vue-expandable-text-line
# NPM
$ npm i vue-expandable-text-line

Description:

expandable-text-line is a Vue component that truncates a large text block into a single line and allows the user to reveal the hidden part of the text on mouse hover or click.

How to use it:

1. Import and register the expandable-text-line component.

import ExpandableTextLine from 'vue-expandable-text-line'

export default {
  components: { ExpandableTextLine }
}

2. Add your content to the expandable-text-line component.

<expandable-text-line>
  ...
</expandable-text-line>

3. Display full text by mouse click instead of mouse hover.

<expandable-text-line use-click>
  ...
</expandable-text-line>

4. Set the transition speed. Default: 0.2

<expandable-text-line use-click :duration=0.2>
  ...
</expandable-text-line>

Preview: