画面サイズに合わせた長さで文章を省略したい overflowの調整
- 2020.03.11
- JavaScript備忘録
- CSS, HTML, JavaScript, Laravel, スクリプト備忘録, 失敗例, 自作システム
画面サイズに合わせた長さで文章を省略したい overflowの調整
今更ながらですが、文章の省略をしたいときってあります。
今回作成したパーツは会社のトピックス。
「○○入荷しました」とか、それくらいならいいのですが、コロナウィルスの影響など内容を長い文章で記載する事もあるわけです。
ちゃんと仕掛けていなかったので、テーブル内で折り返す折り返す。
Widthの値を固定すると画面ごとに調整する値の設定が必要
ちゃんとした内容についてはshow.phpで提供してるから1stアナウンスだけでいいとなれば改行しないで欲しい。
となれば、widthの値を入れてoverflow設定すればいいのですが、この値が1つだけだとPCとスマホとタブレットと同じ値が入り『画面からのはみだし』が避けられません。
1 2 3 4 5 6 7 8 9 10 |
#CSS .overflow{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 400px; height: 20px; margin:0px; padding:0px; } |
パーセント入力が出来ればなんてことはないのですが、オーバーフロー設定では%はダメ。
となると、取れる手段は2つです。
- 端末タイプを取得して、端末ごとに固定した値をwidthに格納する
- 画面やウィンドのサイズを取得してそのサイズに合わせて計算した値をwidthに格納する
端末ごととなると、タブレットの縦持ち横持ちに同じ値が入ります。
PCと取得してもウィンドを小さくすればオーバーフローしてしまいます。
気持ち悪いですね。
と言う事で、ウィンドサイズを取得して計算した値をwidthに入れる事にします。
JavaScriptで画面サイズを取得し省略したい幅に調整する
1 2 3 4 |
<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でおなじみのレスポンシブデザインです。
1 2 3 4 |
<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で回します。
1 2 3 4 5 6 7 8 9 10 11 12 |
@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にすればいいのか!」
1 2 3 4 |
<script> var wsize = window.innerWidth; $('.topics').width(wsize/12*8*0.5); </script> |
はい、あっさり解決でございます。
まとめ
「だいぶスキル上がったんじゃね?」と思っていても、こういうのがチョコチョコあって打たれるんですよね。
IDは基本的に1つのHTML固有のもの
覚えました。
-
前の記事
楽天市場:【送料無料ライン統一】の撤回はなぜ起こったかを推測してみた 2020.03.08
-
次の記事
Laravel:不正アクセスを撃退するLOG&Redirectの仕組みを作ってみた 2020.03.12
コメントを残す