こんにちは。例えばブログサイトを作るとき、記事一覧にタイトルや本文の抜粋が載っていると思います。それらが長い時、何らかの方法で省略をする必要があります
noteの一覧ページを見てみると、ちょうどいい例がありました。noteではタイトルが長いと3点リーダーで省略しています。
文章の省略方法は様々ですが、3点リーダーの場合はCSSのみで簡単に実装できます。その方法を紹介していきます。
結論
|
1 2 3 4 5 |
<body> <div class="Text"> 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より） </div> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.Text { margin: auto; border: 1px solid #000; width: 100%; max-width: 800px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } |
上記のコードで、3点リーダーによる省略ができます。
解説
重要なのは、上記コードの内CSSの下4行です。
|
1 2 3 4 5 6 7 8 |
.Text { ...省略 overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } |
見慣れないプロパティが多いと思いますが、「-webkit-line-clamp」というプロパティが行数の制限をかけています。どのように使うか詳しくはMDN（https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp）に書かれている訳ですが、ポイントをまとめます。
- -webkit-line-clamp: 数値; と指定すると、その数値の行数以上になるときは3点リーダーで省略する。
- display: -webkit-box;（もしくはdisplay: -webkit-inline-box;）かつ-webkit-box-orient: vertical;の時にのみ使用できる。
- 多くの場合、overflow: hidden; を併用する。
1, 2に関してはそういうルールになっているからとしか言いようがないので覚えましょう。
3に関しては、逆にoverflow: hidden;でない場合の挙動を見るとよく分かります。overflow: hidden;でない場合は本来省略されてるはずの文章も見えてしまうのです（下図）。
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
そういうわけで、ほとんどの場合overflow: hidden;を併用することになるでしょう。
注意点
もし要素に縦方向のpaddingがあると、省略したはずの文章が見えることがあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.Text { margin: auto; margin-top: 100px; border: 1px solid #000; width: 100%; max-width: 800px; padding: 20px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } |
この場合は親要素にpaddingをつけたり、そのためのdivを1つ用意するなど工夫をしましょう。
まとめ
ということで、CSSだけで文章を省略する方法でした。毎回JavaScriptで書いていた人もぜひお試しください。
コメントを残す