overflowした時のみ、div要素にシャドウを作りたいのですが。。

####現状

bootstrapを使用し、下記のようなものをhtml.erbで書いています。

@hoge.nameは商品名が入り、最大で50文字ほどの文字列が入ることもあれば、5文字程度のこともあります。レイアウトの都合上、col-1の範囲内で納めたいのでtext-nowrapを使用し、はみ出る部分はスクロールさせています。

html.erb
1<% @hoge.each do |hoge| %>
2  <div class="col-1 text-nowrap" style="overflow: scroll">
3    <p><%= hoge.name %></p>
4  </div>
5<% end %>

↓ erb実行結果

html
1<div class="col-1 text-nowrap" style="overflow: scroll">
2  <p>商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</p>　<!-- 大いにはみ出る -->
3</div>
4<div class="col-1 text-nowrap" style="overflow: scroll">
5  <p>商品名</p> <!-- はみでない -->
6</div>
7<div class="col-1 text-nowrap" style="overflow: scroll">
8  <p>商品名商品名商品</p> <!-- col-1と同じくらい -->
9</div>

####実現したいこと
col-1からはみ出る時はdiv要素の右端にシャドウをつけたいです（文字長いからはみ出てるよ！という主張をしたいです）。ただしはみ出ない場合はシャドウをつけたくないです。

####質問
どうすれば実現できますか？

s8_chu

2019/01/16 08:49 編集

HTML は ERB が混ざっていない、素の HTML で記述していただけませんか？また、もしも他に CSS を記述している場合、そのコードも追記していただきたいです。

Daimian

2019/01/16 08:53

指摘ありがとうございます。繰り返し処理をする際にどういう風に書けば良いのか、という質問をしたいため、この状態でどのように記述すれば良いのか、知りたいです。 bootstrapのみに頼っているため、CSSは書いていないです！

s8_chu

2019/01/16 09:03

返信ありがとうございます。 > この状態でどのように記述すれば良いのか、知りたいです。最初に投稿したコメントは、「もし質問者さんの手元に、 ERB での処理が行われた後の HTML があるのであれば、それを質問文に追記して欲しい」という内容のコメントだったのですが、うまく伝わっているでしょうか？

Daimian

2019/01/16 12:12

ありがとうございます！伝わっていましたが念のため追記しました！

行動規範の内容に同意します

回答1件

ベストアンサー

ループの後にjavascriptで処理する方法。

html
1<script>
2var cols = document.getElementsByClassName('text-nowrap');
3for(var i = 0; i < cols.length; i++){
4  var col = cols[i];
5  col.style.boxShadow = col.firstElementChild.scrollWidth > col.clientWidth ? 'rgba(233, 30, 99, 0.5) 2px 0px 2px 0px' : false;
6}
7</script>

divの中身のpの幅（scrollWidthを使う）のほうがdivの幅より大きい場合、styleにbox-shadowを追加しています。

投稿2019/01/17 02:20

CODEISLE

総合スコア251

Daimian

2019/01/17 02:50

ご回答ありがとうございます！早速試してみます。助かりました

s8_chu

2019/01/17 08:03

蛇足ですが、`text-overflow`プロパティには将来的に、オーバーフローしたテキストを切り取り、行ボックスの端にフェードアウト効果を適用する、[`fade`](https://drafts.csswg.org/css-overflow-4/#funcdef-text-overflow-fade)という値が実装される予定です。この値が各ブラウザに実装されれば、質問者さんの実現したいことは CSS のみで行えるようになりますが、現在この値に対応しているブラウザはありません。