CSSでdiv要素が2行以上とかの行数で省略記号を付ける方法

ブロック要素を表示する時・・・
要素中身がある行数を超えたら省略したいって場面ないですか?

  • div要素が2行を超えたら省略したい
  • p要素で5行以上で省略記号をつけたい

そんな時はあるCSSプロパティを使えば、超簡単です。

ここでは 最大行数を超えたら省略記号を付けるやり方 を紹介します。

また jQuery で動的に行数制限するやり方も合わせて紹介

CSSで行数制限する div要素 を作る手順例

今回は5行で省略記号をつけるdiv要素を作ってみます。

そのやり方とかコード例は以下の通り

 

まず次みたいに専用クラスのついたdiv要素を作成

分かりやすく max-5-lines  というクラス名を付けてるけど、別に何でもOK。

あと div要素 に限らず、ブロック要素なら行数制限できます。

 

そしたら次のCSSを div.max-5-lines  に対して適用

ハイライトした9行目に注目!

最重要ポイントは -webkit-line-clamp を使うこと

これに最大の行数を渡し、 text-overflow: ellipsis;  を指定、
するとその行数を超えた場合に省略記号( ...  )がつきます。

あとこれ以外で大事なポイントは次の2点

  • 収まらない部分を非表示にしておく
    つまり 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 でのコード例も紹介しときます。

 

やり方としては、まず次みたいな関数を作成

引数から渡されたdiv要素 elem  を最大行数 n  で省略するという感じ

やってることはCSSから指定してるときと同じです。

 

あとは行数制限したい要素をこの関数( setMaxLineNum  )に渡せばOK

▼ たとえば行数を2行超えたら省略したいなら・・・

目的のdiv要素に対して、1回関数を呼び出すだけです。

ボタン押下時とかに、最大行数を切り替えたいときとかに便利かも

ここまでのまとめ

最後に大事なポイントをもう一度まとめ

  • 行数制限は -webkit-line-clamp  を使う
    5行で制限したいなら -webkit-line-clamp: 5;  みたいな感じ。あと overflow: hidden;  を指定しておくことも重要ポイント
  • webkit以外用のフォールバックを用意する
    この -webkit-line-clamp  はwebkit系ブラウザ専用。なので IE とか Opera Mini とか、webkit以外のフォールバックを用意しておく

webkit限定とはいえ、フォールバックを使えばほぼ全部に対応できます。

色々便利そうなので、ちょっとした場面で便利そうですね。ではまた($・・)/~~~

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください