yuanqing/line-clamp

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

Opened this issue · 0 comments

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