React 中的线夹使用 clamp.js 导致 IE11 中的对象错误

Question

目标：当任务描述超过其容器的两行时，让浏览器响应地呈现溢出文本省略号外观，而不是当它不是时。

Click here for a screenshot of desired outcome.

下面是我的 React 组件，我们正在导入的 clamp 是 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>
  )
}

这在 Chrome 中完全有效（见上面的屏幕截图），因为它是 webkit 浏览器，甚至没有在 [=18= 的 getLastChild 函数中输入这个有问题的代码区域]，但在 IE11 中，我从上面链接的 clamp.js 收到与此行 #122 相关的错误。

错误：

[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 中使用 line clamp 吗？

Answer 1

像这样使用与 DOM 交互的库在 React 应用程序中可能会出现问题。我更幸运地坚持使用 React 特定库或构建我自己的组件。

我最近不得不实现一个跨浏览器线夹 (IE10+)，我对在那里发现的任何东西都不满意，所以我推出了自己的。我从 clamp.js 逻辑开始，然后从那里调整它以提高性能和准确性。基本方法是 trim 字符串，直到元素达到所需的高度，然后您才能确切知道可以容纳多少个字符，并且可以 trim 根据需要从那里显示省略号或 trim到最后一句话。让它快速并平滑地渲染需要一些技巧和时间。如果您想更具体地查看我的实现，请看这里，或者试试我的 npm 包：https://github.com/bsidelinger912/shiitake.

React 中的线夹使用 clamp.js 导致 IE11 中的对象错误

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

javascript

internet-explorer

cross-browser

reactjs

clamp