Vue text ellipsis

a text-ellipsis plugin both with Vue or common js use.

Version: 1.0.4 Updated: 01/25/2018

By: Luobata License: ISC

Downloads Last 30 Days: 62

Install

npm i vue-text-ellipsis
yarn add vue-text-ellipsis

Repository: https://github.com/Luobata/text-ellipsis

CDNs

bundle.run: https://bundle.run/vue-text-ellipsis

jsDelivr: https://cdn.jsdelivr.net/npm/vue-text-ellipsis

unpkg: https://unpkg.com/vue-text-ellipsis

text-ellipsis

a text-ellipsis plugin both with Vue.

Intro

The situation when you need text ellipsis more then one line and the browser doesn't support the css style -webkit-line-clamp.

Install

npm install --save-dev vue-text-ellipsis

If you are using without Vue, use the package with dom-based situation.dom-text-ellipsis instead.

Usage

import vue-text-ellipsis from 'vue-text-ellipsis';

vue.use(vue-text-ellipsis, {
    width: '50px',
    lineNum: 2,
    fontFamily: 'microsoft yahei',
    fontWeight: 'bold',
    fontSize: '14px',
    left: '...',
    tagName: 'p',
    isImmediate: true,
});

add the vue element in your .vue.

ellipsis(text="这是一句很长的话,真的很长很长很长,到底有多长呢,你来猜猜看" :line-num="2" tagName="p" :fontWeight="100" fontSize="16px" :left="left" :isImmediate="false")

Config

You can add config when vue.use to set global-config or use the props on vue elempent.

Property

Props Type Default Effect
width String The parentsElement's offsetWidth. The max width for one line.
lineNum Number 2 (from global config) The max line.
fontFamily String microsoft yahei (from global config) The fontFamily to calculate the width.
fontSize String| Number 14px (from global config) The fontSize to calculate the width.
tagName String p (from global config) The tag to show the text.(*only span p li *)
left String '…' (from global config) The String add on the end of the last line.
isImmediate Boolean true (from global config) Update the text when the width change immediate or not(like debounce).

Methods

Methods Args Effect
update Recalculate and update the text.

Contributors



luobata
commits
Categories: Vue js
Tags: