jQuery 文字省略 clamp.js

長い文章を読みやすく短く省略して見せる方法の一つを紹介します。 CSSなどで隠すのでもなく、PHPでサーバサイドで編集もしません。 JavaScriptでカットする方法を用いています。

前提としてjQueryが使える環境とします。 そして、ブラグインを読み込みます。

<script type="text/javascript" src="/js/jquery/plugins/clamp/jquery.clamp.js"></script>

JSはこんな感じ

  $(function(){
  // Single line
  $(".cl").clamp({clamp:1});

  // Multi line
  $(".cl2").clamp({clamp:3, animate:true});

  // Use HTML to truncated
  $(".cl3").clamp({
    clamp:2,
    truncationChar:'',
    truncationHTML:'<a href="#">..続きはこちら</a>',
    alwaysDisplay:true
  });
});

サンプルの文章はこちら

長い文章を読みやすく短くまとめる見せ方の一つです。日本語にも対応しています。DOMを書き換えます。なので、ソース上は文章が書かれていて、後からJSで表示上編集されます。以上の文章をJSで短く編集します。

サンプルはこちら

長い文章を読みやすく短くまとめる見せ方の一つです。日本語にも対応しています。DOMを書き換えます。なので、ソース上は文章が書かれていて、後からJSで表示上編集されます。以上の文章をJSで短く編集します。

「cl2」クラスのサンプルはこちら

長い文章を読みやすく短くまとめる見せ方の一つです。日本語にも対応しています。DOMを書き換えます。なので、ソース上は文章が書かれていて、後からJSで表示上編集されます。以上の文章をJSで短く編集します。

「cl3」クラスのサンプルはこちら

長い文章を読みやすく短くまとめる見せ方の一つです。日本語にも対応しています。DOMを書き換えます。なので、ソース上は文章が書かれていて、後からJSで表示上編集されます。以上の文章をJSで短く編集します。

サンプルのスタイルはこうなってます。

<style>
.demo{
background:#CCF;
width:200px;
word-break:break-all;
}
</style>

特徴は文字数ではなく、行単位でカットするところや、ソース上文章は全文なのでSEOでは全文クロールされる可能性があります。(ボット次第ですが。)

このjQueryライブラリについて
作成者: GitHub@josephschmitt
jQuery対応の作者: GitHub@ichi5
ライセンス: WTFPL

2016-05-14 16:01:11

関連するサンプル

人気記事ランキング

© 2018 kipure