dom-text-ellipsis

a text-ellipsis plugin with common js use.

Intro

The situation when you need text ellipsis more then one line and the browser doesn't support the css style -webkit-line-clamp. This lib hasn't add the test of -webkit-line-clamp.If you are using mobile browsers, use -webkit-line-clamp instead.

Install

npm install --save-dev dom-text-ellipsis

Link

If you are using Vue, use the package vue-text-ellipsis instead.

Usage

import ellipsis from 'dom-text-ellipsis';

ellipsis.config({
    lineNum: 2,
    fontFamily: 'microsoft yahei',
    fontWeight: 'bold',
    fontSize: '14px',
    left: '...',
    tagName: 'p',
    resize: false,
});

const ells = document.querySelectorAll('.ell');
ellipsis.init(ells);

<div class="par">
    <div class="ell" lineNum="4" text="这是一句很长很长的话，到底有多长呢 自己感受一下 够长了吧 还没感受到？那再感受下"></div>
    </br>
    <div class="ell" lineNum="4" text="这是一句很长很长的话，到底有多长呢 自己感受一下 够长了吧 还没感受到？那再感受下" resize="true"></div>
</div>

Config

You can add config when ellipsis.config to set global-config or use the attribute 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.
left	String	'…' (from global config)	The String add on the end of the last line.
resize	Boolean	False (from global config)	Add the eventListener resize to window to watch the window change.

Methods

Method	Args	Effect
config	Object: obj	Update the global config.
init	NodeList: doms | HTMLElement: dom	Init the ellipsis dom by the config global and attribute both.
watch	NodeList: doms | HTMLElement: dom	init the ellipsis dom and watch the change of attribute.