ブロック要素を表示する時・・・
要素中身がある行数を超えたら省略したいって場面ないですか？
- div要素が２行を超えたら省略したい
- p要素で５行以上で省略記号をつけたい
そんな時はあるCSSプロパティを使えば、超簡単です。
ここでは 最大行数を超えたら省略記号を付けるやり方 を紹介します。
また jQuery で動的に行数制限するやり方も合わせて紹介
CSSで行数制限する div要素 を作る手順例
今回は５行で省略記号をつけるdiv要素を作ってみます。
そのやり方とかコード例は以下の通り
まず次みたいに専用クラスのついたdiv要素を作成
|
1 2 3 |
<div class="max-5-lines"> ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF </div> |
分かりやすく max-5-lines というクラス名を付けてるけど、別に何でもＯＫ。
あと div要素 に限らず、ブロック要素なら行数制限できます。
そしたら次のCSSを div.max-5-lines に対して適用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div.max-5-lines{ max-width: 350px; word-break: break-all; /** ５行以上で省略 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; /** webkit以外のフォールバック */ line-height: 24px; max-height: calc(24px*5); } |
ハイライトした９行目に注目！
最重要ポイントは -webkit-line-clamp を使うこと
これに最大の行数を渡し、
text-overflow: ellipsis; を指定、
するとその行数を超えた場合に省略記号（
... ）がつきます。
あとこれ以外で大事なポイントは次の２点
- 収まらない部分を非表示にしておく
つまり overflow: hidden; のところ。こうしておけばボックス以上の内容でもスクロールバーが表示されない
- webkit以外のフォールバックを用意
残念ながら -webkit-line-clamp はwebkit系ブラウザでしかサポートされていない。なのでそれ以外のフォールバックとして line-height と max-height を使っている
対応してないブラウザもあるので注意しましょう。（ブラウザ対応状況はこのあと紹介）
ちなみに -webkit-line-clamp のブラウザ対応状況
それでこの -webkit-line-clamp プロパティ、webkit専用 です。
なので line-clamp とか書いても動作しないので要注意
ちなみにwebkit系ブラウザは次のものが代表的
- Google Chrome
- Safari
- Shiira
- QtWeb
詳しい対応状況は Can I Use を参照のこと
ちなみに IE は当然のこと、Opera Mini とかも対応してない模様
ただしフォールバックを用意しておけば、それほど心配する必要ありません。
省略記号までは表示できないけど、行数制限ならできるので
jQueryで動的にdiv要素の行数制限もできる
今紹介したのは CSS で静的に行数制限するやり方
動的に行数指定したいなら jQuery を使ってもできます。
なので最後に、ついでに jQuery でのコード例も紹介しときます。
やり方としては、まず次みたいな関数を作成
|
1 2 3 4 5 6 7 |
function setMaxLineNum(elem, n){ elem.css({ '-webkit-line-clamp': n, 'line-height': '24px', 'max-height': 'calc(24px*'+n+')' }); } |
引数から渡されたdiv要素 elem を最大行数 n で省略するという感じ
やってることはCSSから指定してるときと同じです。
あとは行数制限したい要素をこの関数（ setMaxLineNum ）に渡せばＯＫ
▼ たとえば行数を２行超えたら省略したいなら・・・
|
1 2 3 4 5 |
$(function(){ setMaxLineNum( $('.max-n-lines'), 2 ); }); |
目的のdiv要素に対して、１回関数を呼び出すだけです。
ボタン押下時とかに、最大行数を切り替えたいときとかに便利かも
ここまでのまとめ
最後に大事なポイントをもう一度まとめ
- 行数制限は
-webkit-line-clamp を使う
５行で制限したいなら -webkit-line-clamp: 5; みたいな感じ。あと overflow: hidden; を指定しておくことも重要ポイント
- webkit以外用のフォールバックを用意する
この -webkit-line-clamp はwebkit系ブラウザ専用。なので IE とか Opera Mini とか、webkit以外のフォールバックを用意しておく
webkit限定とはいえ、フォールバックを使えばほぼ全部に対応できます。
色々便利そうなので、ちょっとした場面で便利そうですね。ではまた($・・)/~~~
