shave

WebJar for shave

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-dollarshaveclub-shave
Last Version

Last Version

2.2.2
Release Date

Release Date

Type

Type

jar
Description

Description

shave
WebJar for shave
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/dollarshaveclub/shave

Download github-com-dollarshaveclub-shave

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-dollarshaveclub-shave/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-dollarshaveclub-shave</artifactId>
    <version>2.2.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-dollarshaveclub-shave/
implementation 'org.webjars.npm:github-com-dollarshaveclub-shave:2.2.2'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-dollarshaveclub-shave/
implementation ("org.webjars.npm:github-com-dollarshaveclub-shave:2.2.2")
'org.webjars.npm:github-com-dollarshaveclub-shave:jar:2.2.2'
<dependency org="org.webjars.npm" name="github-com-dollarshaveclub-shave" rev="2.2.2">
  <artifact name="github-com-dollarshaveclub-shave" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-dollarshaveclub-shave', version='2.2.2')
)
libraryDependencies += "org.webjars.npm" % "github-com-dollarshaveclub-shave" % "2.2.2"
[org.webjars.npm/github-com-dollarshaveclub-shave "2.2.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️

This software is maintained under a new repository located at yowainwright/shave

⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️


Shave


npm Bower Travis Greenkeeper CDNJS Twitter share


Shave ✁

Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set pixel number max-height. It then stores the diff of the original text string in a hidden <span> element following the visible text. This means the original text remains intact!

Shave, compared to other truncation plugins:

  • maintains the original text after truncation.
  • does not require other libraries
  • only requires a selector and a max height
  • is very lightweight; ~1.5kb unminified
  • allows for custom ellipsis strings and class names but doesn't over complicate
  • is fast and capable of truncating text within lots of elements quickly
  • is additive. It will play nice with other javascript libraries and more truncation features can easily be built with it.
  • supports non-spaced languages (Non-ascii).

Installing from a package manager

npm

npm install shave --save

bower

bower install shave --save

yarn

yarn add shave

Usage

Add dist/shave.js to your html

  • Or, dist/jquery.shave.js for jQuery/Zepto as of Shave >= v2.

Or as a module

import shave from 'shave';

Syntax

Basic setup

shave('selector', maxheight);
// shave('.shave-selector', 0) for example

Shave also provided options only to overwrite what it uses.

If you'd like have custom class names and not use .js-shave:

shave('selector', maxheight, { classname: 'classname' });

Or if you'd like to have custom characters (instead of the standard ellipsis):

shave('selector', maxheight, { character: '✁' });

Or both:

shave('selector', maxheight, { classname: 'classname', character: '✁' });

Without spaces:

shave('selector', maxheight, { spaces: false });

You can also use shave as a jQuery or Zepto plugin. As of Shave >= v2, use dist/jquery.shave.js for jQuery/Zepto.

$('selector').shave(maxheight);

And here's a jQuery/Zepto example with custom options:

$('selector').shave(maxheight, { classname: 'your-css-class', character: '✁'  });

If you're using a non-spaced language, you can support shave by setting an option spaces to false.

$('selector').shave(maxheight, { classname: 'your-css-class', character: '✁', spaces: false });

Examples

Codepen example with plain javascript.

Codepen example with jQuery.

Codepen example with a non-spaced language.

Notes

text-overflow: ellipsis is the way to go when truncating text to a single line. Shave does something very similar to text-overflow: ellipsis but for multiple lines when line-clamp is not supported. Shave bypasses being a line-clamp polyfill by only accepting a max-height number. This keeps shave a fast and light weight utility.

Shave implements a binary search to truncate text in the most optimal way possible.

Shave is meant to truncate text within a selected html element. This means it will overwrite html within an html element with just the text within the selected element.

Here are some super basic examples of shave with window resize and click events. 🙌

Shave works in all modern browsers and was tested in some not so modern browsers (like Internet Explorer 8) - it works there too. 🍻


Created and maintained by Jeff Wainwright with Dollar Shave Club Engineering.

org.webjars.npm

Dollar Shave Club

Grooming Backlogs and People since 2012: dollarshaveclub.com

Versions

Version
2.2.2