Result
半角スペース等が無いと省略処理が行えない。日本語圏に最適化が必要
※代替案→jquery-expander
jQuery
/** * jquery.readmore - Substring long paragraphs and make expandable with "more" link * @date 7 July 2010 * @author Jake Trent http://www.jtsnake.com/ * @version 1.1 */ (function($) { $.fn.readmore = function(settings) { var opts = $.extend({}, $.fn.readmore.defaults, settings); this.each(function() { $(this).data("opts", opts); if ($(this).html().length > opts.substr_len) { abridge($(this)); linkage($(this)); } }); //「続きを読む」のデフォルト処理 function linkage(elem) { elem.append(elem.data("opts").more_link); elem.children(".more").click(function() { $(this).hide(); $(this).siblings("span:not(.hidden)").hide().siblings("span.hidden").animate({ 'opacity': 'toggle' }, 1000); }); } //文字省略処理 function abridge(elem) { var opts = elem.data("opts"); var txt = elem.html(); var len = opts.substr_len; var dots = "<span>" + opts.ellipses + "</span>"; var charAtLen = txt.substr(len, 1); while (len < txt.length && !/\s/.test(charAtLen)) { len++; charAtLen = txt.substr(len, 1); } var shown = txt.substring(0, len) + dots; var hidden = '<span class="hidden" style="display:none;">' + txt.substring(len, txt.length) + '</span>'; elem.html(shown + hidden); } return this; }; //デフォルト値 $.fn.readmore.defaults = { substr_len: 500, ellipses: '…', more_link: '<a class="more">Read More</a>' }; })(jQuery); //セレクタとオプション指定 $(function() { $('#rm').readmore({ substr_len: 10, more_link: '<a class="more" href="http://google.com">更に読む</a>' }); });
css
.hidden { display:none; }
html
<div id="rm">子供の時分の冬の夜の記憶の中に浮上がって来る数々の物象の中に「行燈」がある。 自分の思い出し得られる限りその当時の夜の主なる照明具は石油ランプであった。</div>