インターネットニュースなどで、見出し一覧で、サマリー表示をする画面で、文章の途中で「...」という風に、三点リーダーで文章をぶった切って、「もっと読む」ボタンを押して記事ページへのリンクをする時の、文章ぶった切ってからの三点リーダー処理をどのようにスマートにできるかを考えてみました。
WEBサービスを作っている時の表組みに文章が入る場合や、長文のサマリー表示などの際に使えると思うので、覚えておくと便利かも
長文を枠に収める方法
下記のような文章を表示させる場合に、あまりサイズを大きくしなく無い場合や、来まったサイズに納めたい場合の方法です。
<div class="text-area">あめんぼあかいな、あいうえお
うきもにこえびもおよいでる
かきのきくりのきかきくけこ
きつつきこつこつかれけやき
ささげにすをかけさしすせそ
そのうをあさせでさしました
たちましょらっぱでたちつてと
とてとてたったととびたった
なめくじのろのろなにぬねの
なんどにぬめってなにねばる</div>
.text-area{
max-width:200px;
border:1px solid black;
overflow:hidden;
padding:8px;
border-radius:4px;
}
文字の入ったdivに対して以下のcssを適用すると枠の大きさによって文字数が制限できます。
.box{
text-overflow: ellipsis;
white-space:normal;
display : -o-box;
display : -ms-box;
display : -moz-box;
display : -webkit-box;
-o-box-orient : vertical;
-ms-box-orient : vertical;
-moz-box-orient : vertical;
-webkit-box-orient : vertical;
line-clamp: 3;
-webkit-line-clamp: 3;
}
ポイント解説
まず大前提として、"white-space:normal;"をセットしなければいけません。"pre"になっている箇所は、うまく文字がカットしてくれない場合があるので、要注意です。
そして"display : -webkit-box;"はflex-boxのような感じですが、おまじないだと思ってください。
"-webkit-box-orient : vertical;"と"-webkit-line-clamp: 3;"の３つをセットにして使うことで、文字数制限ができあがります。
もし仮にそのエリア内に文字が収まっていれば三点リーダーは表示されないので、PHPやjavascriptなどで文字数を判定して字数制限処理をする必要がなくなります。
ちなみに、"clamp"の値の3は行数を表しており、これを"5"にすると、5行になり、"1"にすると1行制限になります。
問題点
実はこの処理すごく便利なんですが、致命的な欠点があり、FirefoxとIEでは全く動作しません。
スマホの標準ブラウザで使用するのであれば全く問題なく使えるのですが、マルチブラウザを考える公開WEBサーバーやサービスなどでは使えないブラウザの為に、div-boxのサイズ上限(max)をセットして、"overflow:hidden"を設定しておく必要があります。
でも残念ながら三点リーダーの表示がでないので、単なるはみ出ている文章のように見えてしまいますが・・・
今度、暇があったらjavascriptでマルチブラウザをカバーできる関数でも書いてみたいと思います。
とりあえずこの機能は、chromeブラウザやsafariブラウザで、ちょこっとした処理で簡単実装できるので、覚えておいて損はないですよ。
