Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
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:
~1.5kb
unminifiednpm i shave -D
yarn add shave -D
pnpm i shave -D
Add dist/shave.js to your html
Or as a module
import shave from 'shave';
Argument structure is as follows:
shave("selector", maxheight, { options });
Argument type breakdown:
argument | type | required | description | example |
---|---|---|---|---|
"selector" | string | yes | used to select items to shave | ".js-is-shaved" |
maxheight | number | yes | used to specify the maximum height | 50 |
"options" | object | no | use to modify how items are shaved | { character: "..." } |
Options object
breakdown:
options | type | default | description |
---|---|---|---|
character: | string | "…" | character to use for ellipsis |
charclassname: | string | 'js-shave-char' | class name to use for ellipsis element |
classname: | string | 'js-shave' | class to add to the element |
spaces: | boolean | false | if true, spaces will be preserved** |
link: | object | undefined | an object accepting any link accociated |
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 });
With an <a>
(link) tag:
/**
* @notes
* - provide your desired link attributes here!
* @note link attributes trump the character option and className of the ellipsis element
*/
shave("selector", maxheight, { link: LinkObject });
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
});
With an <a>
(link) tag:
/**
* @notes
* - provide your desired link attributes here!
* @note link attributes trump the character option and className of the ellipsis element
*/
$("selector").shave(maxheight, { link: LinkObject });
The shave plugin provides a link option—an <a>
element which replaces the default <span>
element.
As any functionality that is needed without an href
attribute can be made using the default <span>
element, the <a>
is only rendered if the href
attribute is provided.
Any attributes that can be used for an <a>
element can be added to the link object when invoking shave.
Additionally textContent
can be added to replace the default character
option.
Here's a more in-depth example than the basic example(s) above:
shave("selector", 50, { link: { href: 'https://www.google.com', textContent: 'Read More here' } });
note: if an
href
is not specified, the link will not be created!
Codepen example with plain javascript.
Codepen example with jQuery.
Codepen example with a non-spaced language.
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.
FAQs
Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
The npm package shave receives a total of 14,337 weekly downloads. As such, shave popularity was classified as popular.
We found that shave demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.