ニュースセクションでよく見る3点リーダーをtailwindcssで生成方法する方法について

はじめに

最近毎日のように有益な記事が投稿されているので、学習の振り返りも兼ねて些細なことでも自分も投稿しようと思います！

3点リーダーの実装方法について

今回はタイトルにもある通り、ブログ等でタイトルや本文が長くなってしまった際にスタイルが崩れるのを防ぐために使用される3点リーダーの実装方法について解説したいと思います。
下記画像の赤丸で囲んだ部分のやつです！今回は指定した幅で2行以上になってしまう場合に3点リーダーで省略して3行以上にならないようにしています。3点リーダーの省略を行わない場合は2枚目の画像のように表示されます。

テキストが1行の場合

テキストが1行の場合、tailwindcssを採用しているプロダクトであれば下記のコードをpタグやh1, h2タグなどに指定するだけで実装できます！

className='truncate'

簡単ですね！

css-moduleを採用しているプロダクトであればindex.module.cssに下記のコードを追加するだけで実装できます！元々webサイト制作をしていた方であればcss-moduleの方が書き慣れていると思います！

.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 

テキストが複数行の場合

テキストが複数行の場合、tailwindcssを採用しているプロダクトでは先ほどよりも少し手間がかかりますが諦めずに頑張りましょう！
まず下記コマンドをプロダクトのディレクトリのターミナルで実行します。

# npm
npm install @tailwindcss/line-clamp

# Yarn
yarn add @tailwindcss/line-clamp

次に、tailwind.config.tsのpluginsにコードを追加します。

const config: Config = {
  content: [
    ~
  ],
  theme: {
    ~
  },
  plugins: [
    require('@tailwindcss/line-clamp')
  ],
};

次に3点リーダーで省略したい箇所のclassNameにline-clamp-nを追加します。nの部分は何行目で省略したいかによって変更してください。(例:3行目で省略したければline-clamp-3)

className='line-clamp-n'

最後に、今回のようにターミナルを使ってプラグインをインストールした場合はnpm run devコマンドを実行してlocalhostを再起動してください。これやらないとエラー発生するので忘れずに行いましょう！

次にcss-moduleを採用しているプロダクトについてです！
こちらの場合はindex.module.cssにcssを数行追加するだけです！

.text {
  -webkit-line-clamp: n;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

-webkit-line-clampで省略したい行数を指定します。(例:3行なら-webkit-line-clamp: 3;)
他のコードについて気になる方は調べて欲しいのですが、テンプレートみたいなものだと思って頂いて大丈夫です！

今回の記事は以上になります！
使用頻度あまり多くないかもしれませんが、ニュース一覧などのセクションを実装予定であれば使用することもあると思いますのでその際の参考になればと思います！

現在、オリアプ作成途中なのでまた気になる技術があれば共有したいと思います！
最後まで読んで頂いた方はありがとうございます！