Geek Answers Handbook

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

Purpose: to visualize the rendering of the text overflow ellipsis when the task description consists of two lines for the container, and not when it is not.

Click here to get a screenshot of the desired result.

Below is my React component clamp, which we import, 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 fully works in Chrome (see the screenshot above), because it is a webkit browser and does not even fall into this area of ​​the problem code in the function getLastChildfrom clamp.js, but in IE11 I get an error related 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"}

https://github.com/josephschmitt/Clamp.js/issues/24 clamp CSS :

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

# 117 clamp.js( ), elem.lastChild, :

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

, , :

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

- , IE?

+4
1

, DOM, React. , .

- (IE10 +), , , . clamp.js . , , , , , , . , . , npm: https://github.com/bsidelinger912/shiitake.

+2

More articles:


All Articles