【タブメニュー】テキストの文字数制限と省略文字の表示

コンテンツのボリュームを制限するため、テキストの文字数を35文字＋省略文字で表示します。35文字以内のテキストは省略文字を使用せずにそのまま表示します。

タブメニューの構造は下記の記事と同様です。CSSのコードも同じです。

【タブメニュー】コンテンツをフェードインで表示

プラグインを使用せず、自作でレスポンシブのタブメニューを実装します。タブの切り替えでコンテンツをフェードインして表示する動作になります。

tech.brick-plan.jp

2019.07.23

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();
});