Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ftellipsis

Package Overview
Dependencies
Maintainers
2
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ftellipsis

Multi-line ellipsis made possible

  • 0.2.3
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
2.8K
decreased by-17.87%
Maintainers
2
Weekly downloads
 
Created
Source

FTEllipsis Build Status

Solves the problem of applying ellipsis (…) on a multi-line block of text at the point it overflows its container. Ellipsis will work in conjuction with CSS column-count if you wish.

Results are best in webkit browsers due to the availability of webkit-line-clamp. For non-webkit browsers FTEllipsis falls back to clamping text and positioning an element over the end of the overflowing line, allowing the developer to style this however they wish.

Getting Started

NPM
$ npm install ftellipsis
Bower
$ bower install ftellipsis

or download the production version or the development version.

Examples

Usage

var element = document.getElementById('my-element');
var ellipsis = new Ellipsis(element);

ellipsis.calc();
ellipsis.set();

Requirements:

  • The element must have a fixed height so that content overflows.
  • The element must have child elements (eg. <p>s).

Unsetting

Unsetting an ellipsis instance removes any styling.

ellipsis.unset();

Destroying

Destroying an ellipsis instance resets the instance back to it's original state, unsetting internal variables and state.

ellipsis.destroy();

Tests

$ npm install
$ npm test

API

Ellipsis();

Initialize a new Ellipsis instance with the given element.

Options:

  • container A parent container element
  • reRender Forces a redraw after ellipsis applied

Ellipsis#calc();

Measures the element and finds the overflowing child.

Ellipsis#set();

Clamps the overflowing child using the information acquired from #calc().

Ellipsis#unset();

Unclamps the overflowing child.

Ellipsis#destroy();

Clears any references

Credits and collaboration

The lead developer of FTEllipsis is Wilson Page at FT Labs. All open source code released by FT Labs is licenced under the MIT licence. We welcome comments, feedback and suggestions. Please feel free to raise an issue or pull request. Enjoy...

Keywords

FAQs

Package last updated on 14 Aug 2014

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc