画面サイズに合わせて最適な場所で長い文字を省略表示するOverflow

画面サイズに合わせて最適な場所で長い文字を省略表示するOverflow

そんなに頻度はないものの「あれ、前どうやったっけ？」と過去に戻る事があったので備忘録的に記録します。

やりたいのはこんな感じ

<div>で書けばよいのだろうけど、テーブルである必要性の高い時ってやっぱりあります。

それなのに、今の画面ってスマホもあるしワイドなPCもある。これどうやってコントロールしようかというのが今回の内容です。

長い文章の省略を指示するのは overflow

CSSの細かな内容は沢山出てるのでそちらで確認ください。今回書いたのはこんな感じ。

＃CSS
 .overflow{
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     height: 20px;
     margin:0px;
     padding:0px;
 }

「指示したサイズからはみ出る場合は省略してね」と書いたわけですが、指示サイズのWidth が存在しません。

WidthはJacvaScriptで画面サイズを取得して指示

 <script>
   var wsize = $(window).innerWidth(); 
   $('.news').width(wsize/12*6*0.8); 
 </script>

Laravelの場合はViewにScriptで書いてもOKですし、public/jsに書いてもOK。

でも実際は『共通して使う決まったサイズ』が無い限りViewに書く事が多いのではないかな。

Laravelの場合は<div class='col-lg-12'>などと書いてレスポンシブ化する事が多いと思います。

上の例ではそれを見越して、画面サイズを12分割し( col-lg-6 だったので) 6を掛けてます。んで、ギチギチに入ってるのはカッコ悪いので余白を作る為に0.8を掛けてます。

これで、class=news でWidthのサイズが呼び出せると。

JSで取得したWidthサイズの呼出し

#省略
･･･
<td>
   <p class="overflow news">{{$topic['contents']}}</p>
</td>
･･･

table_tdの中で<p class='news'>で呼び出します。
はみ出し処理の諸々を記載したoverflow classも忘れずに記載。

これだけで画面サイズに合わせて省略位置を変えることができます。
ウィンドサイズの変更で随時変えたい場合はウィンドサイズの変更を感知するイベントを用意すればOKです。

まとめ

最近「あれなんだっけ？」の検索で自分の記事が上位に存在している事がありました。

備忘録は自分の為にも必要ですね。

この記事も多分そんな時に役立つはず！