[Tailwind CSS] n行目以降の文章は「...」と表示する

はじめに

この記事では、長い文章を省略し先頭の文章のみを表示する方法を解説します。

参考資料

前提条件

1. 下記サイトを活用して表示しております。

2. 見やすいようにfont-sizeを200%にしております。

html {
  font-size: 200%;
}

3. 見やすいように下記divで囲っております。

<div class="flex flex-col justify-center min-h-screen mx-10">
  <!-- 対象のhtmlを記載 -->
</div>

結論

line-clamp-nを活用すると n 行目移行が非表示にすることが出来ます。

1. line-clamp-1 ~ line-clamp-6: 1~6行目まで指定することが出来ます。
2. line-clamp-none: テキストが制限される行数を解除しすべてのテキストが表示される

<!-- 3行目移行を非表示にする場合 -->
<p class="line-clamp-3">
  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

見本

<div class="mb-3">
  <p class="font-black">1行目まで表示</p>
  <p class="line-clamp-1 pl-3">
    ああああああああああああああああああああああああああああああああああああああああ
  </p>
</div>
<div class="mb-3">
  <p class="font-black">2行目まで表示</p>
  <p class="line-clamp-2 pl-3">
    あああああああああああああああああああああああああああああああああああああああ
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  </p>
</div>