Nourishing Pear Medley

    line-clamp

    1.0.0 • Public • Published

    line-clamp npm Version Build Status Bundle Size

    Line clamp a DOM element in vanilla JavaScript

    • Truncates in pure JavaScript; does not rely on -webkit-line-clamp
    • Works even if the given element contains nested DOM nodes
    • Supports appending a custom string instead of an ellipsis ()

    Usage

    Editable demo (CodePen)

    HTML:

    <div class="line-clamp">
      Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.
    </div>

    CSS:

    .line-clamp {
      width: 100px;
      line-height: 20px;
    }

    JavaScript:

    const element = document.querySelector('.line-clamp')
    lineClamp(element, 3)

    Boom:

    <div class="line-clamp" style="overflow: hidden; overflow-wrap: break-word; word-wrap: break-word;">
      Lorem ipsum dolor sit amet, <strong>consectetur…</strong>
    </div>

    Limitations

    API

    const lineClamp = require('line-clamp')

    lineClamp(element, lineCount [, options])

    Returns true if text was truncated, else returns false.

    options is an optional configuration object.

    • Set options.ellipsis to change the string to be appended to the truncated text. Defaults to .

    See Usage.

    Installation

    $ yarn add line-clamp

    Prior art

    License

    MIT

    Install

    npm i line-clamp

    DownloadsWeekly Downloads

    7,587

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    6.95 kB

    Total Files

    4

    Last publish

    Collaborators

    • yuanqing