ftlabs/ftellipsis

Multi-line ellipsis made possible

FTEllipsis

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

• Primary
• Single Line

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...

ftellipsis's Issues

set()/unset() should bail if no child element will actually be clamped

This is as simple as adding || !this.child.el to the first lines of set and unset

Doesn't work in Internet Explorer 11

What browsers are supported?

Grunt readme generation broken

$ npm install
$ grunt
Running "uglify:build" (uglify) task
File "build/ftellipsis.min.js" created.

Running "readme:dist" (readme) task
Warning: Cannot call method 'forEach' of undefined Use --force to continue.

Aborted due to warnings.
$ grunt --version
grunt-cli v0.1.9
grunt v0.4.1

FWIW I'm on OSX 10.8.3,

Child elements must be a block type and should not have any additional padding/margin styles.

Just a note, not sure if this is a bug or if the readme needs to be updated. I found that the child elements in the requirements don't work if they are span (so I'm guessing non-block type), or if they have any margin (so maybe any styles that mess with the line-height calculations). Figured I'd post it here in case someone else was trying to figure out why something wasn't working.

For reference, the browser I was testing this on was Chrome 74

Version mismatch

Long connected string causes issues

I had issues when I tested with a long connected string like this:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

the issue is that it reserved the long text space however the displayed text is the desired result

IE9

In IE9, I'm getting this error on init:

SCRIPT5007: Unable to get property 'add' of undefined or null reference
ftellipsis.js, line 309 character 5

And in IE8, this is the error that gets thrown:

SCRIPT5007: Object expected
ftellipsis.js, line 64 character 5

Implement unit test coverage tooling and badging

Implement unit test coverage tooling and badging. Might be nice to add on the devDependencies badge too.

Allow ftlabs npm account to publish new versions of ftellipsis on npm

I guess this is testament to the stability of this code, but over a year after the last release of this module it'd be kinda nice to release a new version that gives more useful error messages... @wilsonpage could you add us to the approved maintainers?

npm owner add ftlabs ftellipsis

https://www.npmjs.org/doc/cli/npm-owner.html

Line clamp doesn't go up when element gets taller

I have an element with a height that is getting changed dynamically when the window is resized. When the window gets shorter, the element gets shorter and the line clamp on the child elements goes down properly. When the window gets taller, however, the element gets taller but the line clamp does not go up. Here's a jsfiddle example.

Is there a way I can fix this with my code?