flexellipsis logo


flexellipsis cover 1flexellipsis cover 2

You just discovered that good ol’ CSS only supports single line ellipsis. But especially in a responsive site,  you never really know how much text can fit into a container element with limited height. If it gets too long because the container becomes too narrow, the layout breaks. You need an ellipsis solution for multiline text.

FlexEllipsis is a JavaScript lib that makes it possible and looks just like you would expect it to. No weird fade-outs to try to make the dots look like they’re attached to the text. No filtering out line breaks. No webkit-only fiddling.

FlexEllipsis supports:

  • Responsive Websites with fluid, flexible width layouts.
  • Multiple ellipsis elements in one page.
  • Line Breaks in your text content (<br> ).
  • Punctuation characters in your content, so you never end up with “word,…” and the like.
  • Customization. Check out what you can configure below in the documentation.
  • Performance of your page. The lib only weighs in at 3KB and is tested to improve its execution speed.
  • A wide variety of browsers (complete list here).
  • Free updates if a new version of FlexEllipsis comes out.

Right now, all that is required is that jQuery is imported into your project. We are working on a non-jQuery version.

 

Licensing

Yes, FlexEllipsis costs a buck, but that has two advantages for you. One is support. If you encounter bugs with the library, give us a shout and we will do our best to help you out. Two – it is made by experienced devs who work in production environments and know what it takes. That’s why it’ll overall give you time in which you can charge much more for making other stuff for your clients… or go hang out with your friends at the bar or your family at the beach. Or both.

One license is good for one domain. If FlexEllipsis ends up not being the right solution for your web project, you can get a full refund within 10 days after your purchase. So you only pay when you use it. If you’re creating a non-commercial project, drop us a line what you’re working on and you can even get it for free.

Be done super quick and shine with a professional solution.


Buy for $19

You will get a zip file containing the minified JS library (3 KB) plus a small style sheet (300 Byte).


 

Browser Support

We have tested FlexEllipsis in the following browsers in combination with jQuery 2.1.4.

Desktop
Chrome 43 (June 2015)
Firefox 38 (June 2015)
Safari 8 (June 2015)
Internet Explorer 11 (June 2015)
Internet Explorer 10 (June 2015)
Internet Explorer 9 (June 2015)

Definitely not supported is Internet Explorer 8 and below.

Mobile
Chrome 43 on Android 5.0.2 (June 2015)
HTC Browser 7 on Android 5.0.2 (June 2015)
Safari Mobile on iPad, iOS 8.3 (June 2015)
Chrome 43 on iPad, iOS 8.3 (June 2015)

 

Documentation

Getting started

FlexEllipsis comes with a .js file that handles all ellipsis functionality as well as a small snippet of css which sets up the container element base styles. Make sure to adjust the values within the stylesheet as needed. You may also define an individual width , height , and line-height  for each of your ellipsis containers.

To add an ellipsis to a text, simply add the paragraph containing the text to a container with class ellipsis .

<div class="ellipsis">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Throughout the code <b>  elements are used for calculation purposes. You will not be able to use this tag in your text when using FlexEllipsis. However, using <span>  and styling accordingly is not a problem.

 

Configuration

FlexEllipsis can be configured through an object that is passed into its params()  function.

// example
FlexEllipsis.params({responsive: false});

 

responsive

Turn off recalculations on browser window resize for non-responsive layouts.
Possible values are true /false .