https://github.com/limlt/vue-show-more-text

A simple vue multiline sentence ellipsis component for vue.js 2.x. The text in the component will be truncated automatically by line numbers, without specifying text max length.
https://github.com/limlt/vue-show-more-text

vue vuejs vuejs2

Last synced: 13 days ago
JSON representation

A simple vue multiline sentence ellipsis component for vue.js 2.x. The text in the component will be truncated automatically by line numbers, without specifying text max length.

• Host: GitHub
• URL: https://github.com/limlt/vue-show-more-text
• Owner: limlt
• Created: 2020-11-26T06:32:42.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2020-12-11T09:55:53.000Z (almost 5 years ago)
• Last Synced: 2025-10-09T02:16:47.712Z (2 months ago)
• Topics: vue, vuejs, vuejs2
• Language: Vue
• Homepage:
• Size: 311 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue - vue-show-more-text - A simple vue multiline sentence ellipsis component for vue.js 2.x. The text in the component will be truncated automatically by line numbers, without specifying text max length. ` 📝 7 months ago` (UI Components [🔝](#readme))
• awesome-vue - vue-show-more-text - Vue multiline sentence ellipsis component. The text in the component will be truncated. (Components & Libraries / UI Components)

README

          
# show-more-text ( for vue.js 2.x)

[![Version](https://img.shields.io/npm/v/vue-show-more-text.svg)](https://www.npmjs.com/package/vue-show-more-text) [![License](https://img.shields.io/npm/l/vue-show-more-text.svg)](https://www.npmjs.com/package/vue-show-more-text) [![Downloads](https://img.shields.io/npm/dt/vue-show-more-text.svg)](https://www.npmjs.com/package/vue-show-more-text)

A simple vue multiline sentence ellipsis component for vue.js 2.x. The text in the component will be truncated automatically by line numbers, without specifying text max length.

![エビフライトライアングル](doc/img/vue-show-mote-text-demo.gif "サンプル")

## Installation

### NPM

```

$ npm install vue-show-more-text --save

```

### Run demo 

```

$ git clone https://github.com/limlt/show-more-text-demo

$ cd show-more-text-demo

$ npm install

$ npm run dev

```

## ShowMoreText Component Attributes

| Parameter        | Description           | Type               | Default       |  Required   |

|------------|----------------|--------------------|--------------|----------------|

| text | The string data that need to add ellipsis | String | -   | true |

| more-text | The anchor text that show more | String | Show less   | false |

| less-text | The anchor text that show less | String | Show more   | false |

| lines  | Number of lines to display | Number | 3  | false |

| has-more | Flag that show anchor | Boolean | true | false |

| additional-container-css | Addtional css for container | String| - | false |

| additional-content-css | Addtional css for content  | String | - | false |

| additional-content-expanded-css | Addtional css for content when expanded  | String | - | false |

| additional-anchor-css | Addtional css for anchor  | String | - | false |

| click | Anchor click callback function |  Function | - | false |

## How To Use

```

  

    

      

        

          

        

      

    

  

import vueShowMoreText from 'vue-show-more-text'

export default {

  components: {

    vueShowMoreText,

  },

  data() {

    return {

      txtString: `Note: This property was originally implemented in WebKit and has some issues. It got standardized for legacy support. The CSS Overflow Module Level 3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.`,

    }

  },

  methods: {

    change(showAll) {

      console.log(showAll)

    },

  },

}

```

## License

[MIT](http://opensource.org/licenses/MIT)