Newborn Programming Monsters

    shave
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    Shave


    npm unpkg snyk 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
    • new! provides ellipsis link functionality
    • 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 i shave -D
    yarn add shave -D
    
    pnpm i shave -D
    

    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';

    Arguments

    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

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

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

    Prefer Link Functionality

    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!

    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.

    Install

    npm i shave

    DownloadsWeekly Downloads

    56,094

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    50.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • yowainwright