npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ellipsed

v1.6.0

Published

A JavaScript library for multilined text ellipsis

Downloads

4,177

Readme

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 or the DOM Node or Node List 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. delimiter | string | ' ' | Use '' for text written in languages such as Japanese, Chinese, etc. since there's usually no space break in such languages; or for text contains long word (word that is longer than the width of the container).

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;

Performance

It seems that having multiple calls of ellipsis with responsive option enabled would add multiple event listeners and would be recommended to use a single call with a multiple selector. A single event listener should be more efficient and events handling more fluid.

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.