コンテンツのボリュームを制限するため、テキストの文字数を35文字+省略文字で表示します。35文字以内のテキストは省略文字を使用せずにそのまま表示します。
タイトル01
コンテンツのボリューム制限のためテキストの文字数を35文字+省略文字で表示
タイトル02
コンテンツのボリューム制限のためテキストの文字数を35文字+省略文字で表示
タイトル03
35文字以内のテキストは省略文字を使用せずにそのまま表示
タブメニューの構造は下記の記事と同様です。CSSのコードも同じです。
htmlのコードも上記の記事と同様ですが、テキストのみ変更しています。
タイトル01、タイトル02のタブは35文字を超えるテキスト、タイトル03のタブは35文字以内のテキストです。
<ul id="tab_menu">
<li id="tab1" class="selected"><img src="arrow.png" alt="">タイトル01</li>
<li id="tab2"><img src="arrow.png" alt="">タイトル02</li>
<li id="tab3"><img src="arrow.png" alt="">タイトル03</li>
</ul>
<div class="tab_panel">
<p class="title">タイトル01</p>
<p class="txt">コンテンツのボリューム制限のためテキストの文字数を35文字+省略文字で表示</p>
</div>
<div class="tab_panel">
<p class="title">タイトル02</p>
<p class="txt">コンテンツのボリューム制限のためテキストの文字数を35文字+省略文字で表示</p>
</div>
<div class="tab_panel">
<p class="title">タイトル03</p>
<p class="txt">35文字以内のテキストは省略文字を使用せずにそのまま表示</p>
</div>
最後にjQueryのコードです。
変数cutFigureに表示する文字数を設定します。文字列の切り出しはslice、substr、substringとありますが、ここでは切り出す長さが設定できるsubstrを利用します。pタグのテキストの長さと変数cutFigureを比較して、pタグのテキストの方が長い場合のみ変数cutFigureの文字数+省略文字を表示します。
$(function() {
var setElm = $('.tab_panel .txt');
var cutFigure = '35';
var afterTxt = '...';
$(setElm).each(function() {
var textLength = $(this).text().length;
var textTrim = $(this).text().substr(0,(cutFigure));
if(cutFigure < textLength) {
$(this).html(textTrim + afterTxt);
}
});
$('#tab_menu li').click(function() {
var index02 = $('#tab_menu li').index(this);
$('.tab_panel').css('display','none');
$('.tab_panel').eq(index02).fadeIn();
$('#tab_menu li').removeClass('selected');
$(this).addClass('selected');
});
var index01 = $('#tab_menu li.selected').index();
$('.tab_panel').css('display','none');
$('.tab_panel').eq(index01).fadeIn();
});