TailwindCSSで文字数オーバーしないように制限を設ける方法

公開日:

2023-08-16

TailwindCSSで文字数オーバーを制御する

下記のカード画像のように、文字がオーバーフローしてしまうことありますよね。

今回はこれをTailwindCSSで解決する方法について紹介します。

TailwindCSSのデフォルトには、TypographyのText Overflowのところに truncateというクラスがあります。

htmlに追加すると下記のようなコードになるはずです。

<p class="truncate">文字数オーバーしちゃう場合どうしたらいいんだろう。よくわからないけどTailwindで解決したい。解決方法を誰か教えてください。ああああああああああああ</p>

実際に先ほどのカードにtruncateを追加し、実行してみると下記の画像のようになります。

確かにオーバーフローは改善されていますが、これだと行数の指定ができない問題があります。例えば2行まで見えるようにしたくても1行目以外は見えなくなってしまいます。

さらに言えば、切れ目が悪いと次に続いているのがわからないという問題もあります。

Tailwindにはline-crampプラグインがあり、これだと先ほどのtruncateの問題を解決できます。

まずはline-crampをインストールしましょう。

shellで下記の通り実行します。

npm install @tailwindcss/line-clamp

tailwind.config.jsに下記のように設定します。

tailwind.config.js

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

line-clampを使うには、line-clamp-{行数}を指定します。例えば2行目まで表示したい場合は下記のようにします。

<p class="line-clamp-2">文字数オーバーしちゃう場合どうしたらいいんだろう。よくわからないけどTailwindで解決したい。解決方法を誰か教えてください。ああああああああああああ</p>

実際に先ほどのカードにline-clamp-2を追加してみると、下記の画像のようになります。

2行目もきちんと見えている上に、最後に「...」と表示されているので省略されていることもわかります。

TailwindCSSを使っていてオーバーフローを解決する場合は、ひとまずline-clampプラグインを利用すればよさそうですね！