文字数を省略して末尾に[…]を表示する

見出しやタイトル等で長い文字列の文末を3点リーダー「…」にして省略すること方法を紹介します。

CSSでの対応方法

<p class="text">テストテストテストテストテストテストテストテストテストテスト</p>

.text {
  width: 100px; /* この幅を超えると省略 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

JavaScript

<p id="text">テストテストテストテストテストテストテストテストテストテスト</p>

const text = document.getElementById('text');
const str = text.textContent;
const len = 20;

if(str.length > len){
    text.textContent = str.substring(0, len)+'...';
}

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。