dom-text-ellipsis v0.0.2

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

Methods