長いテキストやはみ出したテキストを「・・・」といった3点リーダに置き換える場合、１行であれば、CSSで事足りるのですが、複数行になると webkit-line-clamp で、できますが、IE(Internet Explorer)に対応してないので、jQueryのtrunk8というプラグインで対応しました。その他にも同様のプラグインがありましたが、ブラウザ幅の可変への対応など、個人的にはこちらが一番しっくりきましたので、Railsサイトにも導入してみました。
本家デモサイトはこちらです。
http://jrvis.com/trunk8/
Scaffoldでデモアプリを作ってみる
|
1 2 3 4 |
$ rails new trunk8 $ cd trunk8 $ rails g scaffold User name:string sentence:text $ rails db:migrate |
jQueryを使うためにこれらを読み込みます。
Gemfile
|
1 |
gem 'jquery-rails' |
assets/javascripts/application.js
|
1 |
//= require jquery |
$ bundle install を実行します
サンプルデータを入れる
seed.rbに適当なデータを投入してみます。
db/seed.rb
|
1 2 3 4 5 6 |
5.times do |n| User.create!( name: "#{n}名前", sentence: "trunk8 is an intelligent text truncation extension to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.Unlike conventional truncation that just limits the character length of text, trunk8 measures the content area for spill-over and intelligently chooses the text that best fits in the given space." ) end |
$ rails db:seedを実行します
trunk8の導入
こちらのページからダウンロードしてtrunk8.jsというファイルをapp/assets/javascripts配下に配置します。
１箇所ならid指定でいいですが 動的に複数となるのでclassセレクタにして、該当箇所にあてます。
app/views/users/index.html.erb
|
1 2 3 4 5 6 7 8 9 |
<% @users.each do |user| %> <tr> <td><%= user.name %></td> <td class="trunk8"><%= user.sentence %></td> <td><%= link_to 'Show', user %></td> <td><%= link_to 'Edit', edit_user_path(user) %></td> <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td> </tr> <% end %> |
オプションはlinesで行数を指定、tooltipは全文が隠れていてもツールチップで全文を表示してくれます。デフォルトでは true 担っています。「…」以外をあてたい場合は、fill: ”で指定します。デフォルトは’&hellip’です。
ブラウザ幅の可変対応には、window.onresizeイベントです。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(function() { $('.trunk8').trunk8({ lines: 3, tooltip: false }); }); /* handle browser resize too */ $(window).resize(function (event) { $('.trunk8').trunk8(); }); </script> |
IE ではインライン要素に使った場合に、正常に動作しませんので、CSSなどでブロック要素にしておきましょう。
以上となります！！ご覧いただき、ありがとうございました！！😁
