add ellipsis to multiline text
Switch branches/tags
Nothing to show
Clone or download
jjenzz Merge pull request #14 from arlopurcell/bug/12
Adding slash and backslash to htmlEntities and backquote to the esca…
Latest commit 70f9efc Nov 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md adding URL demo to readme Aug 27, 2013
jquery.ellipsis.js changing to hex for consistency Nov 2, 2018
jquery.ellipsis.min.js update minified script Nov 21, 2014

README.md

jquery.ellipsis

What is this?

.ellipsis() adds a class to the last 'allowed' line of text so you can apply text-overflow: ellipsis;. You can view a demo on codepen.io.

How do I use it?

Add the following CSS to your stylesheet:

.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

And then initialise the plugin:

$('.foo').ellipsis();

You can customise with the following options:

$('.foo').ellipsis({
  lines: 3,             // force ellipsis after a certain number of lines. Default is 'auto'
  ellipClass: 'ellip',  // class used for ellipsis wrapper and to namespace ellip line
  responsive: true      // set to true if you want ellipsis to update on window resize. Default is false
});