実装目安
3分
概要
【Vanilla JS】長文テキスト任意の文字数で文末に3点リーダーを自動付与して省略し、さらに「もっと見る」をクリックすることで省略テキストを表示させる処理。用途
- 長文テキストを指定文字数で省略し、省略したテキストを「もっと見る」をクリックすることでフェードインで表示させる。
- 「省略処理＋もっと見る」を指定の文字数で実施したい時に使用する。
要件
- data属性を使用することで要素ごとに自由に省略処理を実行する文字数を指定可能。
- 文末省略はJSで自動付与される。（「… もっと見る」）
- 同一ページの複数箇所で使用可能。
- JavaScriptのみで実装。（jQuery不使用）
注意事項
- 「もっと見る」の表示を「more」などに変更したい場合はJS側で該当箇所を修正する。
- フィードインのイージングはliner。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
