オーバーした文字を...で表示する

ブログサイトで各記事を一覧にする時に、記事の内容を一部表示して、枠に入りきらない文字を「...」にしたい時、Tailwindを使ってると簡単。

参考記事

1行のみの場合

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

tailwindであれば、truncateを付けるだけ

Text Overflow

複数行の場合

npm install @tailwindcss/line-clamp

tailwind.config.jsに以下を記載

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

Multi-line truncation with @tailwindcss/line-clamp