文末を「…」で終わらせる！「-webkit-line-clamp」の使い方
Posted: Last Update:
最新投稿などの文末を「…」（三点リーダ）で終わらせる方法、ご存じですか？「-webkit-line-clamp」を使えば簡単にできます！この記事では、line-clampをきれいに表示させるポイントを詳しく解説します！これさえ読めば、今日から「…」を実装できます！
この記事の目次
文末を「…」で終わらせる！「-webkit-line-clamp」の使い方
こんにちは、HTML、CSS、PHPでサイトを作成している「亀の子」です。このサイトでも、トップページの記事リンクの説明文を「…」で終わらせる手法を利用しています。
「-webkit-line-clamp」の実例
ボックス領域からあふれてしまう文字列を表示させず、代わりに文末を「…」で終わらせるには「-webkit-line-clamp」というCSSを利用します。のちほどCSSの設定について詳しく説明しますが、まずはサンプルを見てみましょう。
「-webkit-line-clamp」のスタイルシートサンプル
先に表示した実例では、文字列をdivで囲み、divに対してスタイルシートを適用して表示しています。
HTML
ボックス領域からあふれてしまう文字列を表示させず、代わりに文末を「…」で終わらせるには「-webkit-line-clamp」というCSSを利用します。
</div>
スタイルシート
background-color:#FFFFCC;
box-shadow: 0 1px 3px grey;
padding: 0 0.5em;
width: 300px;
height:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
では、「-webkit-line-clamp」の設定方法を次の章で詳しく見ていきましょう！
「…」の実装方法詳細
三点リーダ（…）で文末を終わらせるためには、まず文字を表示させる領域を指定し、領域内で「-webkit-line-clamp」を設定します。
文章表示領域を固定し、あふれる文字を非表示にする
「…」で文章を終わらせるためには、まず表示領域を指定して文字数を制限する必要があります。先にご紹介したスタイルシートを例にとると、「width: 300px;」で横幅を、「height:5em;」で高さを指定しています。
そして、重要なのが「overflow: hidden;」。overflowを指定しないと、文字列がDIVに収まらない場合にも、だらだらと続けて表示されてしまいます。「overflow: hidden;」を使用することで、あふれた文字列を非表示にすることができます。
background-color:#FFFFCC;
box-shadow: 0 1px 3px grey;
padding: 0 0.5em;
width: 300px;
height:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
こちらがdivに「overflow: hidden;」を適用していないケース。文字列が表示領域からはみ出して表示されていることが分かります。
こちらがdivに「overflow: hidden;」を適用したケース。表示領域に収まらない文字列は省略されていることが分かります。
「-webkit-line-clamp」で末尾に「…」を追加
次に、「-webkit-line-clamp」の設定を行います。スタイルシートで言うと、黄色にハイライトした部分です。「-webkit-line-clamp」は「display: -webkit-box;」と「-webkit-box-orient: vertical;」とセットで使います。必ずハイライトした3文を入れるようにしましょう。高さや幅はご自分のサイトの領域に合わせて適宜編越してください。
「-webkit-line-clamp:;」では、何列目に「…」を入れるか指定します。サンプルのように「-webkit-line-clamp: 3;」と入れれば3行目の末尾に、「-webkit-line-clamp: 10;」と入れれば10行目の末尾に「…」を入れることができます。
background-color:#FFFFCC;
box-shadow: 0 1px 3px grey;
padding: 0 0.5em;
width: 300px;
height:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
先ほどdivの設定方法でご紹介したサンプルに「-webkit-line-clamp:3;」を入れると、下記のように三点リーダが末尾に表示されます。
編集後記
文末に「…」を入れたい時には、表示領域の高さと幅を指定し「overflow: hidden;」で領域からあふれる文字を非表示にします。「-webkit-line-clamp:;」は「-webkit-line-clamp」は「display: -webkit-box;」と3つセットでスタイルシートに設定しましょう。
設定方法が分かれば簡単に実装できますので、ぜひ使ってみてください。この記事がサイトを自作している同志の皆様のお役に発てば幸いです。
