Line clamp in React using clamp.js causing Object error in IE11

Question

Goal: Have browser render an overflow-text ellipsis look responsively when task description is over two lines for it's container, not when it isn't.

Click here for a screenshot of desired outcome.

Here is my React component below, the clamp we are importing is a local copy of https://github.com/josephschmitt/Clamp.js

import React from 'react'
import clamp from 'client/util/clamp'
import { findDOMNode } from 'react-dom'

const TextDescription = ({ name, description, dueDate }) => {
  return (
    <div>
      <div className='desc-text' ref={(clampee) => {clampee && clamp(findDOMNode(clampee), { clamp: 2 })}}>
        <strong>{name} Task: </strong> {description}.
      </div>
      <div>
        Due: {dueDate}
      </div>
    </div>
  )
}

This is completely working in Chrome (see screenshot above) because it is it webkit browser and doesn't even enter this area of problematic code in the getLastChild function from clamp.js, but in IE11 I'm getting an error relating to this line #122 from clamp.js linked above.

Error:

[object Error] {description: "Unable to get property 'children' of undefined or null reference", name: "TypeError", number: "-2146823281"}

I have already looked at this thread https://github.com/josephschmitt/Clamp.js/issues/24 and tried their suggestions with specifying the clamp parameter explicitly and setting the CSS as such:

.desc-text
  display: block;
  line-height: 18px;
  margin-top: -20px;

We also tried modifying line #117 from clamp.js (linked above)to include elem.lastChild so it is now:

if (elem.lastChild && elem.lastChild.children && elem.lastChild.children.length > 0) { ...

And as a result get a slightly different error as it enters the next if:

[object Error] {description: "Unable to get property 'parentNode' of undefined or null reference", name: "TypeError", number: "-2146823281"}

Anyone know how to get line clamp to work in IE?

Answer 1

Using libraries that interact with the DOM like this can be problematic in a React application. I've had better luck sticking with react specific libraries or building my own components.

I recently had to implement a cross browser line clamp (IE10+) and wasn't happy with anything I found out there, so I rolled my own. I started with the clamp.js logic and tweaked it from there for performance and accuracy. The basic approach is to trim the string until the element is the desired height, then you know exactly how many characters can fit and can trim as desired from there to show an ellipsis or trim to the last word. Getting this to be fast and to render smoothly takes some finesse and time. Take a look here if you want to see my implementation more specifically, or give my npm package a try: https://github.com/bsidelinger912/shiitake.