Line clamp in React using clamp.js causing Object error in IE11
<p>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. </p>

<p><a href="http://i.stack.imgur.com/okTuF.png" rel="noreferrer">Click here for a screenshot of desired outcome.</a></p>

<p>Here is my React component below, the <code>clamp</code> we are importing is a local copy of <a href="https://github.com/josephschmitt/Clamp.js" rel="noreferrer">https://github.com/josephschmitt/Clamp.js</a> </p>

<pre><code>import React from 'react'
import clamp from 'client/util/clamp'
import { findDOMNode } from 'react-dom'

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

<p>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 <code>getLastChild</code> function from <code>clamp.js</code>, but in IE11 I'm getting an error relating to this line #122 from clamp.js linked above.</p>

<p>Error: </p>

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

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

<pre><code>.desc-text
  display: block;
  line-height: 18px;
  margin-top: -20px;
</code></pre>

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

<pre><code>if (elem.lastChild &amp;&amp; elem.lastChild.children &amp;&amp; elem.lastChild.children.length &gt; 0) { ...
</code></pre>

<p>And as a result get a slightly different error as it enters the next if: </p>

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

<p>Anyone know how to get line clamp to work in IE? </p>