2行の名前のリストを切り捨てます

Question

私の反応コンポーネントの配列から来るカンマ区切りの名前のリストを表示したいと思います。

<div> 
<span>Liza</span>, <span>Eric</span>, <span>Michael</span>, <span>Natalie</span>, <span>Stephan</span> 
<a href="#" className="show-more hidden">and {remaining} more...</a> 
</div> 

しかし、このリストはコンテンツの最大2行で表示する必要がありますレンダリングされたHTMLは次のように見えます。リストには、2行を超えた場合、私は隠されている残りの名前の量を表示する必要があります。

リザ、エリックを、

マイケル - および2より...-

リストも応答性がなければなりません（切り詰めると「X more」と表示されます）。そして、最後に表示された名前の最後にリストを切り捨てて、 "X more"のテキストが2行以内に収まるようにする必要があります。

この問題を解決する方法をお勧めする人はいますか？純粋なCSSソリューションは、切り詰めのために動作しない可能性があります。

ありがとうございます！

PD私が達成したいもののスクリーンショット：

Answer 1

私はそのための（近い）、純粋なCSSのソリューションがあると思います。 <span ref={item => this.items.push(item)}

componentDidMount()反復ではオーバー：

1. を切り捨てずに名前のリストをレンダリングし、すべての項目にrefコールバックを取り付け要素
2. を非表示にするvisibility/opacityを設定します。しかし、とは、あなたがこのようなものでしょう反応しますthis.itemsとし、アイテムの幅を合計します（item1.width + item2.width ...）
3. 幅の合計がリストのコンテナの幅より大きい場合、残りの部分を切り捨てる必要があることがわかりますアイテム。
4. 今、あなたは（も、あなたが今visibilityを設定することができます関数は切り捨てで正しくリストをレンダリングする方法を見つけ出すために、この状態を使用することができますレンダリング（切り捨てで再レンダリングリストにthis.setState({truncate: true, remainingItemCount: x})
5. を内部状態または何を使用することができます正常に戻っ）

https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute