Nominal Pizza Masticator
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ellipsedpublic

    Ellipsed

    license   GitHub forks GitHub stars
    npm version npm compatibility

    contributions welcome Join the chat at https://gitter.im/ellipsed/Lobby   Demo

    What is Ellipsed?

    Ellipsed is a JavaScript library for generating multi-lined ellipsed text.
    Indicating the number of visible lines, it will truncate the text at the correct position in targeted elements.

    Example screenshot

    Demo

    You can see the demo here: https://nzambello.github.io/ellipsed/

    The example/ directory of this repo contains the demo showed above. To start it on your local machine, clone the repository and install it by following the installation instructions below, then start it with npm start (or with yarn start).

    Install

    # Yarn 
    yarn add ellipsed
     
    # NPM 
    npm install --save ellipsed
     
    # Bower 
    bower install ellipsed

    Usage

    Call the ellipsis method with three parameters:

    ellipsis(selector, rows, options);
    • selector - A CSS selector string used to target the element for truncation
    • rows - An integer value used as the number of rows that should be visible, following words will be trucated with the replaceStr (default is '...').
    • options - Allows an options object to be passed to further customise the functionality. See options section below for details.

    If responsive option is set, the function returns the ID of the listener returned by setTimeout. It can be useful to clear resize handler timeout.

    Options

    Options can be passed through the method using the third parameter, which provides greater control.

    Name Type Default Description
    replaceStr string '...' The string that substituted following the trucated string.
    responsive boolean false If true, the method is re-called on resize event, so the number of rows is preserved.
    debounceDelay integer 250 If responsive option is set, it's the delay value for resizing events debouncing.

    Import

    Ellipsed is provided as a UMD module.

    You can use it as a ES6 module:

    import { ellipsis } from 'ellipsed';

    As a CommonJS module:

    var { ellipsis } = require('ellipsed');

    As an AMD module:

    require([
      'ellipsed'
    ], function(ellipsed) {
      var ellipsis = ellipsed.ellipsis;
    });

    Or as a global module in the browser:

    var ellipsis = window.ellipsed.ellipsis;

    Browser support

    The library has been tested on:

    • Google Chrome 60+
    • Firefox 55+
    • Safari 10+
    • Edge 14+
    • IE 9+

    Contributing

    New contributors are warmly welcome, see the CONTRIBUTING.md file for other information.

    Many thanks to @nekorina for project's logo.

    Keywords

    none

    install

    npm i ellipsed

    Downloadsweekly downloads

    37

    version

    1.3.1

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar