【jQuery】指定行数でテキストをline-clampで省略表示(…)&「続きを見る」ボタンの実装

[ ID : 9520 ]
ゴールド
【jQuery】指定行数でテキストをline-clampで省略表示(…)&「続きを見る」ボタンの実装
実装目安
3分

概要

指定した行数を超える場合にテキストを省略表示(…)し、「続きを見る」ボタンをクリックすると省略されたテキストを表示する。

用途・要件

  • テキストが指定行数を超える場合、テキスト末尾に三点リーダー(…)と「続きを見る」ボタン表示する。
  • テキストが指定行数を超えない場合、テキスト末尾の三点リーダー(…)と「続きを見る」ボタンは非表示になる。
  • 「続きを見る」ボタンをクリックすると、省略されていたテキストが全て表示される。
  • 画面幅をリサイズにした際も、テキストが指定行数を超えているか判定して、三点リーダー(…)と「続きを見る」ボタンの表示/非表示を切り替える。
  • テキストの省略表示(…)はCSSの-webkit-line-clampプロパティを使用。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

その他

  • jQuery v3.6.0使用。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録