【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！

てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T