yuanqing / line-clamp

:clamp: Line clamp a DOM element in vanilla JavaScript

line-clamp

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

• The element is assumed to have a pixel line-height, obtained via window.getComputedStyle.

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

• Clamp.js
• FTEllipsis
• Shave

License

MIT

line-clamp's Issues

no file bundle.js

Please add file bundle.js

The codepen is broken

The code pen (https://codepen.io/lyuanqing/pen/VQQVry) is broken:

Uncaught ReferenceError: lineClamp is not defined at pen.js:2 (anonymous) @ pen.js:2

https://wzrd.in/standalone/line-clamp@latest returns a 504 Gateway Time-out

Float line-height

For the elements which have line-height written as a float number there is an issue in calculation, due to truncation of decimal part.
e.g. for line-height: 18.5667px
parseInt('18.5667px', 10) // 18
parseFloat('18.5667px') // 18.5667

Suggestion is to update how maximumHeight is calculated:

module.exports = function (rootElement, lineCount, options) {
  ...
  var maximumHeight = Math.round(
      (lineCount || 1) *
      parseFloat(window.getComputedStyle(rootElement).lineHeight))

no pure browser bundle

https://codepen.io/DanielRuf/pen/dqwgrp

Lots of forced reflows

Those are caused by interleaving mutations and measurements in a loop
Unfortunately, I don't know how to fix this without making clamp asynchronous. If you're OK with such a change in the next major version, fastdom library maybe of a good help

https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid_layout_thrashing

Use of `getComputedStyle` Results in `maximumHeight` Being NaN

For app frameworks like Angular, HTML elements can be generated and apply effects (like line-clamping) before those HTML elements are actually rendered into the DOM. This means that virtually all values from window.getComputedStyles are empty strings which makes this line of code produce NaN as a value.

In truncateTextNode, the comparison of the text node's scroll height to the maximum height now compares a number (zero) to NaN, which is always false. This never breaks out of the loop and every word in the text node gets deleted. This means that text node content that gets initialized before an HTML element is inserted into the DOM will be deleted completely.

Can lineHeight be added as an option to the exported function so that frameworks can inject expected line heights before components are added to the DOM? Some other alternative could be acceptable, so long as the case of a zero-height element with no computed line-height value can be handled.

module.exports = function (rootElement, lineCount, options) {
  ...
  var maximumHeight =
    (lineCount || 1) * parseInt(window.getComputedStyle(rootElement).lineHeight || options.lineHeight, 10);

Truncates more lines than intended on smaller viewports

I have an issue where any text that apply line-clamp to gets truncated to just one line in smaller (< 968px) viewports even though I've set it the option to three lines. Works fine for viewports > 968px. Any ideas what could be causing this?

I've confirmed that the line-clamp method correctly calculates the line-height of the text element.

Wrap ellipsis character into span with class

It would be great if you would wrap ellipsis character into span with class to enable styling it differently than the rest of the text.

Adding via CDN?

Sorry if this sounds kind of stupid, I should know the answer, but how do I go about adding something like this into a non Node application?

Suppose I just had raw HTML page... is there a way I can just download minified version or have some kind of CDN to reference?