以前、［text-overflow］を使用して文章を省略する方法を書きましたが、この場合ですと、一行のみで行数を指定して省略することはできません。
行数を指定したい場合は、CSSの［line-clamp］が便利です。
［line-clamp］は、文章を指定した行数に制限することができるプロパティになります。
また、［line-clamp］は拡張機能を実装するベンダープレフィックス「-webkit-」を追記する必要があります。
以下、必要なCSSです。今回は例として3行の行数を指定します。この場合、［-webkit-line-clamp: 3;］と書きます。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}以下は、実装例です。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
実装例の［Result］の［Run Pen］をクリックしてください。3行目で［…］と文章を省略することができました。このように［-webkit-line-clamp］を使用すれば、簡単に行数を指定して文章を省略することができますね。
また［-webkit-line-clamp］も［text-overflow］と同様に、使うための条件があります。
使用には必要な条件は以下の通りです。
