CSS/文章が長い時に指定行数以上の文章を隠す

たまにコードを書いていると、

「文章が長すぎて、途中から非表示にできるようにしたい」

と思うことがたまーにあります。

こんな感じの長い文章ですね↓

これを例えば3行目より下の文章は表示させたくない場合、以下のようにCSSを記述することで、対応ができます。

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; //ここに任意の数字を入力

実装の例は以下の通りです。

See the Pen Untitled by ISHIIAoi00 (@ishiiaoi00) on CodePen.

以上、文章が長いときに、途中で文章を非表示にする方法でした。