【テクニック】複数行対応：CSSだけで実装する3点リーダー
WEBサイトを作成しているとお知らせや施工事例などのページを作成することも多々あります。記事全文はそれぞれの詳細ページで読んでもらうため、一覧ページでは1行や2行などある程度抜粋した文字数のみ表示することが多々あります。例えば1行だった際、1行目の最後の文字でブツッと切れてしまうとすごく違和感を感じてしまいます。その際よるあるWEBサイトのテクニックとして3点リーダーというものがあります。
3点リーダーとは1行目や2行目の最後の文字を「…」としてまだ続きがあるよという表現方法です。3点リーダー自体はいろいろな実装方法があり、PHPやJavaScriptなどのプログラミング言語を使って文字を切り取り最後の文字を「…」に置き換える方法があります。しかしこの方法だと切り取る個所が多い場合、表示速度が重くなってしまいます。できれば3点リーダーを実装するのにこれらのプログラミング言語は使用したくありません。
今回の記事ではWEBサイトを作成していると必ずと言っていいほど実装する必要がある3点リーダーをCSSのみで実装する方法を解説していきます。
この記事の目次を表示
CSSで実装する3点リーダー【1行の場合】
text-overflowを使用する
CSSプロパティのtext-overflowを使用することで、文字列が表示領域からはみ出してしまった時に自動で末尾を3点リーダーにしてくれることが出来ます。これを使用するためにはその他いくつかのCSSプロパティの設定が必要になります。
- overflowプロパティをvisable以外に設定する
- white-spaceプロパティをnowrapに設定する
HTML
<p>CSSで実装する3点リーダー【1行の場合</p>
CSS
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
white-space: nowrap;
改行をしない指定です。この指定がない場合、省略されずに文章が折り返されず表示されます。overflow: hidden;
はみ出した分を非表示にする指定です。この指定がない場合、省略されずに分がはみ出します。text-overflow: ellipsis;
はみ出した要素がある場合、末尾を3点リーダーにする指定です。この指定がない場合、文章が途中で切り取られるだけで3点リーダーは表示されません。
ただし、この方法は1行表示でしか使用することが出来ません。ただし2行以上の場合はこの次に紹介する方法で実装出来ます。
CSSで実装する3点リーダー【複数行の場合】
webkit-line-clampを使用する
複数行の3点リーダーを実装するためにまずは以下の指定をします。
- displayプロパティをwebkit-boxに設定する
- webkit-box-orientプロパティをverticalに設定する
これらを指定した状態で、webkit-line-clampを指定します。これを1とした場合、1行目の末尾を3点リーダーとし、2とした場合は2行目の末尾が3点リーダーになります。
HTML
<p><span>CSSで実装する3点リーダー【複数行の場合】</span></p>
CSS
p {
width: 100%;
overflow: hidden;
display: block;
}
span{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
応用サンプル
僕がよく使っているやり方を記載します。使いまわし抜群でおすすめです。
<!-- 1行の場合 -->
<p class="trimming"><span class="trimming__inner trimming__pc1 trimming__sp1">CSSで実装する3点リーダー【複数行の場合】</span></p>
<!-- 2行の場合 -->
<p class="trimming"><span class="trimming__inner trimming__pc2 trimming__sp2">CSSで実装する3点リーダー【複数行の場合】</span></p>
<!-- 3行の場合 -->
<p class="trimming"><span class="trimming__inner trimming__pc3 trimming__sp3">CSSで実装する3点リーダー【複数行の場合】</span></p>
.trimming {
width: 100%;
overflow: hidden;
display: block;
}
.trimming__inner {
display: -webkit-box;
-webkit-box-orient: vertical;
}
/*----- PC専用 */
@media screen and (min-width:769px) , print{
.trimming__pc1 {
-webkit-line-clamp: 1;
}
.trimming__pc2 {
-webkit-line-clamp: 2;
}
.trimming__pc3 {
-webkit-line-clamp: 3;
}
}
/*----- SP専用 */
@media screen and (max-width:768px) , print{
.trimming__sp1 {
-webkit-line-clamp: 1;
}
.trimming__sp2 {
-webkit-line-clamp: 2;
}
.trimming__sp3 {
-webkit-line-clamp: 3;
}
}
PC、スマホ別々に管理することでPCでは1行だけ表示して、スマホでは2行表示したいなど、クラスを振り分けることで自由自在に3点リーダーをコントロールすることが出来ます。サンプルではPC、スマホそれぞれ3行分までですが、あらかじめ用意することで3行以上も対応可能です。
