見出しやタイトル等で長い文字列の文末を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)+'...';
}関連記事
