「続きを読む」を実装

はじめに

案件で実装することになったので、それの備忘録です。

目的

youtubeなどに実装されているコメントが長いと省略されて表示されているこれです。

既存

    <div class="flex-1 px-2 ml-2 text-gray-600 break-all">
      <%= comment.content%>
    </div>

実装

探せばあるもので、下記のものを利用しています。

yarn add @stimulus-components/read-more 

app/javascript/controllers/index.js

import ReadMore from "@stimulus-components/read-more";
application.register("read-more", ReadMore);

ここの最後の行のCSSで、2行まで表示し、それ以上は省略するということをやっています

app/javascript/stylesheets/application.css

.read-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 2);
}

    <div class="flex-1 px-2 ml-2 text-gray-600 break-all">
      <div data-controller="read-more" data-read-more-more-text-value="続きを読む" data-read-more-less-text-value="一部を表示">
        <p class="read-content" data-read-more-target="content">
          <%= comment.content%>
        </p>
        <button data-action="read-more#toggle">続きを読む</button>
      </div>
    </div>

さいごに

gemというわけではありませんが、サクッと実装できたことに驚きです。
ただ、デメリットしては無条件で「続きを読む」が表示されます。
そのため、自分は文字数だったり、行数だったりで出す出さないの条件式を設けました。
ケースバイケースがあると思いますので、その辺はお好みで実装してみてください。