ブログカードのタイトル等を指定した文字数で制限をかけ、文末に”…”を追加してみます。

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です