ブログカードのタイトル等を指定した文字数で制限をかけ、文末に”…”を追加してみます。
CSSで幅を指定する方法はこちら。
完成イメージ
実装
substring()メソッドに指定した文字数を渡します。
<p class="js-txtLimit">このテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたい</p>
//==============================================
// 表示文字数を制限
//==============================================
const els = document.getElementsByClassName('js-txtLimit');
const len = 40;//最大文字数を指定します
for(let i = 0; i < els.length; i++) {
const el = els[i];
const str = el.textContent.trim();
if (str.length > len) {
el.textContent = str.substring(0, len) + '…';
}
}
//==============================================
// [jQuery] 表示文字数を制限
//==============================================
$(function() {
const len = 40; // 最大文字数を指定します
$('.js-txtLimit').each(function() {
const els = $.trim($(this).text());
if (els.length > len) {
const textContent = els.substring(0, len) + '…';
$(this).text(textContent);
}
});
});
【参考】String.prototype.substring() – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring