jQueryで文字列を特定の文字数でカットして末尾に「...」などを追加する方法｜BlackFlag

jQueryで文字列を特定の文字数でカットして末尾に「...」などを追加する方法 Webサイトのトップページで表示するお知らせ情報など レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして 末尾に「...」などの追記情報（これも任意の文字列）を追加するやり方を シンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】jQueryで文字列を特定の文字数でカットして末尾に「...」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。 これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。 このダミーテキストは文字数カット用です。 そしてこの＜li＞リスト一つ一つの文字列をみて 特定の文字数でカットさせます。 CSS側ではページロードの際に 一瞬長い文字列が表示されてしまわぬよう カットさせる要素はあらかじめ非表示の状態にしておきます。 ◆CSS ul li { visibility: hidden; } そして実際に文字列をカットさせるスクリプトは以下の様になります。 $(function(){ var $setElm = $('ul li'); var cutFigure = '30'; // カットする文字数 var afterTxt = ' ...'; // 文字カット後に表示するテキスト $setElm.each(function(){ var textLength = $(this).text().length; var

http://black-flag.net/jquery/20121010-4227.html