複数行対応のjQuery三点リーダ 「trunk8」をRailsアプリに組み込む

長いテキストやはみ出したテキストを「・・・」といった3点リーダに置き換える場合、1行であれば、CSSで事足りるのですが、複数行になると webkit-line-clamp で、できますが、IE(Internet Explorer)に対応してないので、jQueryのtrunk8というプラグインで対応しました。その他にも同様のプラグインがありましたが、ブラウザ幅の可変への対応など、個人的にはこちらが一番しっくりきましたので、Railsサイトにも導入してみました。

本家デモサイトはこちらです。
http://jrvis.com/trunk8/

Scaffoldでデモアプリを作ってみる

jQueryを使うためにこれらを読み込みます。

Gemfile

assets/javascripts/application.js

$ bundle install を実行します

サンプルデータを入れる

seed.rbに適当なデータを投入してみます。

db/seed.rb

$ rails db:seedを実行します

trunk8の導入

こちらのページからダウンロードしてtrunk8.jsというファイルをapp/assets/javascripts配下に配置します。

1箇所ならid指定でいいですが 動的に複数となるのでclassセレクタにして、該当箇所にあてます。

app/views/users/index.html.erb

オプションはlinesで行数を指定、tooltipは全文が隠れていてもツールチップで全文を表示してくれます。デフォルトでは true 担っています。「…」以外をあてたい場合は、fill: ”で指定します。デフォルトは’&hellip’です。
ブラウザ幅の可変対応には、window.onresizeイベントです。

jQuery

IE ではインライン要素に使った場合に、正常に動作しませんので、CSSなどでブロック要素にしておきましょう。

以上となります!!ご覧いただき、ありがとうございました!!😁


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp