画面サイズに合わせた長さで文章を省略したい overflowの調整

画面サイズに合わせた長さで文章を省略したい overflowの調整

今更ながらですが、文章の省略をしたいときってあります。

今回作成したパーツは会社のトピックス。
「○○入荷しました」とか、それくらいならいいのですが、コロナウィルスの影響など内容を長い文章で記載する事もあるわけです。

ちゃんと仕掛けていなかったので、テーブル内で折り返す折り返す。

Widthの値を固定すると画面ごとに調整する値の設定が必要

ちゃんとした内容についてはshow.phpで提供してるから1stアナウンスだけでいいとなれば改行しないで欲しい。

となれば、widthの値を入れてoverflow設定すればいいのですが、この値が1つだけだとPCとスマホとタブレットと同じ値が入り『画面からのはみだし』が避けられません。

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

パーセント入力が出来ればなんてことはないのですが、オーバーフロー設定では％はダメ。
となると、取れる手段は2つです。

端末ごととなると、タブレットの縦持ち横持ちに同じ値が入ります。
PCと取得してもウィンドを小さくすればオーバーフローしてしまいます。
気持ち悪いですね。

と言う事で、ウィンドサイズを取得して計算した値をwidthに入れる事にします。

JavaScriptで画面サイズを取得し省略したい幅に調整する

<script>
  var wsize = window.innerWidth;
  $('#topics').width(wsize/12*8*0.5);
</script>

お～～、簡単だ。
window.innerWidthだけでウィンドサイズをとってくるんだからJSは便利です。
$('#topics')で id で値を呼び出せるようにして、idのwidth にウィンドサイズ÷12×8×0.5の幅を与えます。

この演算値の理由はLaravelでおなじみのレスポンシブデザインです。

<div class="col-lg-8">
  <div class="col-lg-5">
  </div>
</div>

Laravelのレスポンシブデザインは画面幅をまず12分割し、その中の何コマ使うかを明示します。

上の例では12分割中の8コマをつかって、その中を更に12分割したウチの5コマを使う。
つまり、欲しい幅は【 画面サイズ÷12×8÷12×5 】この幅は何のマージンも取っていない値なので、演算時に多少の調整をします。

計算した値が1行目にしか採用されていない

トピックスなのでDBから値を引っ張ってきてforeachで回します。

@foreach($topics as $topic)
  <tr class='smallfont change_pointer' style='border-bottom: 1px;' data-href="/topics/{{$topic->id}}/edit">
    <td class='td_text'>
     @if(($NewMarkDate) < ($topic-->date))
  　   <center><img src="{{ asset('/icon/marker/new.png') }}" style="height: 25px;"></center>
     @endif
     </td>
     <td class='td_text'>{{$topic->date}}</td>
     <td class='td_text'>{{$topic->title}}</td>
     <td class='td_text'><p class="overflow" id="topics">{{$topic->contents}}</p></td>
   </tr>
@endforeach

1行目はちゃんと省略されるのですが、2行目以降省略してくれません。

理由はごく単純でした。

そもそもIDは、一つのHTMLに固有のもの

なのだそうです。

CSS基準で覚えてきたので、この辺のルールには疎いです。

「じゃあ、classにすればいいのか！」

<script>
  var wsize = window.innerWidth; 
  $('.topics').width(wsize/12*8*0.5);
</script>

はい、あっさり解決でございます。

まとめ

「だいぶスキル上がったんじゃね？」と思っていても、こういうのがチョコチョコあって打たれるんですよね。

覚えました。