JSPM

jquery.tapping

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q17721F

jQuery plugin for ellipsis on multiple line content.

Package Exports

  • jquery.tapping

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery.tapping) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
});