テキストが1行を超えたら三点リーダー表示にしたい場合や、複数行のテキストを任意の行数で三点リーダー表示にしたい場合のCSSです。
テキストが1行の場合
テキストが1行の場合は、text-overflow: ellipsis;を使用します。text-overflow は、はみ出たテキストをどのように表示させるかを設定できるプロパティです。ellipsisは省略符号「…」をつけてくれます。
See the Pen ellipsis by yoshio (@creata-dsgni) on CodePen.
テキストが複数行の場合
テキストが複数行の場合は、line-clampプロパティを使って指定した行数に制限します。3行表示の場合、-webkit-line-clamp: 3;を使用します。CSSのline-clampプロパティは行数で制御しますので、可変幅でも指定した行数で省略されます。
See the Pen line-clamp by yoshio (@creata-dsgni) on CodePen.
