line clamp in clamp.jsを使用して、IE11でオブジェクトエラーが発生する

Question

目的：タスク記述がコンテナの2行を超えていない場合にブラウザが応答してオーバーフローテキスト省略記号を表示します。ここで

Click here for a screenshot of desired outcome.

私は、以下のコンポーネントを反応させるのである、それはそれはWebKitのであるから、我々はインポートするclampは（上のスクリーンショットを参照）。これは完全にChromeで働いている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> 
) 
} 

のローカルコピーでありますブラウザであり、関数の問題のあるコードのこの領域にclamp.jsから入ることもできますが、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を見て、明示的にクランプパラメータを指定して、そのようにCSSを設定することで彼らの提案を試してみました：

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

我々はまた、ラインを変更してみましたclamp.jsの＃117（上記リンク先）にelem.lastChildが含まれるようになりました。現在は

結果として、それは次回に入るようならば、わずかに異なるエラーが表示されます。誰でもIEで動作するようにラインクランプを取得する方法を知っている

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

？

Answer 1

このようにDOMとやり取りするライブラリを使用すると、Reactアプリケーションで問題になることがあります。私は、特定のライブラリに反応したり、自分のコンポーネントを構築したりすることで、より良い運を得ました。

私は最近、クロスブラウザのラインクランプ（IE10 +）を実装しなければならなかったので、私が見つけたものは満足していなかったので、私は自分自身をロールバックしました。私はclamp.jsのロジックから始め、そこからパフォーマンスと正確さを調整しました。基本的なアプローチは、要素が希望の高さになるまで文字列をトリミングし、その後、希望するとおりにいくつの文字が収まるかを正確に知って、最後の単語に省略記号またはトリムを表示します。これを高速にし、スムーズにレンダリングするには、いくつかの精巧さと時間が必要です。私の実装をより具体的に見たい場合、またはnpmパッケージに試してみたい場合はここをクリックしてください：https://github.com/bsidelinger912/shiitake。