tailwind.cssで長い文字列を・・・にする方法【複数行】

一行のみ

<div className="truncate">
  一行のみを・・・にする場合
</div>

複数行

ライブラリを導入

yarn add @tailwindcss/line-clamp

tailwind.config.js

module.exports = {
  plugins: [require('@tailwindcss/line-clamp'),],
};

２行

<div className="line-clamp-2">
 【２行】ゴリラゴリラゴリラゴリラゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
  ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
  ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
</div>

３行

<div className="line-clamp-3">
 【３行】ゴリラゴリラゴリラゴリラゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
  ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
  ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ ゴリラ
</div>