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

Link

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.