文字数制限をして設定した文字数を超えると…をだして省略するというものを下記URLを参考に実装しました。
http://black-flag.net/jquery/20121010-4227.html
html
1<p class="txt"><strong>全角テキスト全角テキスト全角テキスト全角テキスト</strong><br> 2全角テキストtexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
javascript
1 var $setElmTopics = $('.txt'); 2 var cutFigureTopics = '50'; // カットする文字数 3 var afterTxtTopics = ' …'; // 文字カット後に表示するテキスト 4 5 $setElmTopics.each(function(){ 6 var textLength = $(this).text().replace(/\s+/g,'').length; 7 var textTrim = $(this).text().substr(0,(cutFigureTopics)) 8 9 if(cutFigureTopics < textLength) { 10 $(this).html(textTrim + afterTxtTopics).css({visibility:'visible'}); 11 } else if(cutFigureTopics >= textLength) { 12 $(this).css({visibility:'visible'}); 13 } 14 });
ただこの方法だと、<strong>や<br>などのタグが消えてしまい。。
理想としては下記のようなものを作りたいのですが、どのように記述すればいいかが検討がついておりません。
・文字数は<strong>や<br>などのソースをぬかして、全角では1文字半角では0.5文字として50文字
・50文字を超えると末尾に…をつける
・<strong>や<br>などのソースは消したくない
下記の3番目の形が近いと思うのですが。。
http://gallery.renowan.com/archive/multByteStringSlice/app/index.html
ヒントでも構いませんので、よろしくお願いいたします!
回答5件
あなたの回答
tips
プレビュー