要素の幅によって文字列を省略する文字数を変える

高さ（行数）は決まっているけれども幅はリキッドで都度変わる。要素の中の文字数を固定にすると場合によっては余白が空きすぎてしまう。
そんな時に役立ちそうな小技です。

###HTML

<h4><span class="post-title" data-title="要素の幅によって文字列を省略する文字数を変える">要素の幅によって文字列を省略する文字数を変える</span></h4>

省略させたい文字列をclass="post-title"で囲みます。属性data-titleの中身にも省略させたい文字列を入れます。
class="post-title"はCSSでblock要素にしてください。

###Javascript

[...document.querySelectorAll('.post-title')].forEach((el, index) => {
    let originalTitle = el.getAttribute('data-title'); //元の文字列を取得
    let width = el.getBoundingClientRect().width; //要素の幅を取得
    let style = window.getComputedStyle(el, null).getPropertyValue('font-size'); //フォントサイズを取得
    let fontSize = parseFloat(style); //フォントサイズの単位を取る
    let lines = 3; //行数
    let oneLineCharacters = Math.floor(width / fontSize); //1行に入る文字数を計算
    let numberOfCharacters = oneLineCharacters * lines - 2; //要素に入る文字数を計算。念の為２文字減らす
    let omitTitle = originalTitle.substring(0,numberOfCharacters); //文字を削る
    if(originalTitle.length > numberOfCharacters) omitTitle += '…'; //削っていたら「…」を追加
    el.innerText = omitTitle; //要素に入れる
});

これを関数に入れてloadとresizeの時に発動させます。
letter-spacingを設定されてる時は適宜計算に入れてください。
等幅フォントではないと要素にピッタリ収まる訳ではないですが、はみ出ない程度に文字を省略できるはずです。

###参考サイト
https://javascript.programmer-reference.com/js-width-height/