Zenn
🐕

複数行のテキストをCSSで隠す方法

2024/03/04に公開
CSS
tech

間違いがありましたら大変お手数ですが、DMなどで教えていただけますと幸いです。

１行のテキストをCSSで隠す方法

コードはこちら↓

.text {　　　
  overflow: hidden; //隠す
  white-space: nowrap; //改行しない
  width: 200px; //幅指定
  text-overflow: ellipsis; //3点リーダー
}

この方法はwhite-space: nowrap;が必要なので、複数行のテキストを表示させたい場合には使えません。

複数行のテキストをCSSで隠す方法

デモはこちら↓

ポイントとなるコードだけ抜き出しました↓

.text {　　　
   font-size: 1rem;
　　　　　　line-height: 1.2;
　　　　　　max-height: calc(1 * 1.2 * 2rem);　//font-size * line-height * 2行
   max-width: 300px; //幅指定
   overflow: hidden; //隠す
}

ポイントはテキスト2行分の高さを上記のように指定することです。
ただ、これだけでは3点リーダーをつけることはできません。

複数行のテキストをCSSで隠す方法(3点リーダー付き)

こちら↓のプロパティを使用しました。
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

下記のコードを追加すると3点リーダーが付きます。

.text {　　　
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //行数を指定
}

複数行のテキストをCSSで隠し、JSで3点リーダーをつける

デモはこちら↓

// テキストをトリミングして、3点リーダーをつける
function textTrim() {
    //textクラスがついた要素の配列をselectorsに挿入
    var selectors = document.getElementsByClassName('text'); 
    
    // 表示したい行数
    const row = 2;
    
    // 文末に追加する文字
    const clamp = '…';

    for (i = 0; i < selectors.length; i++) {
      //各要素ごとに処理を行う
      var selector = selectors[i];
      //CSSプロパティを取得
      var style = window.getComputedStyle(selector);
      var fontsize = parseFloat(style.fontSize); //font-sizeを取得
      var width = parseFloat(style.width); //widthを取得
      
      //各要素のテキストを取得
      var text = selector.innerText;

      //要素に入る全角文字の数を取得
      var zenCount = Math.floor(width / fontsize) * row ;

      // 最初の zenCount 文字の中に含まれる半角文字の数を計算
      var halfCount = 0;
      for (var j = 0; j < zenCount; j++) {
          if (text.charCodeAt(j) >= 32 && text.charCodeAt(j) <= 126) {
              halfCount++;
          }
      }
      // 収まる文字数を計算
      var wordCount = zenCount + Math.floor(halfCount / 2);

      // 文字数を超えたら
      if (text.length > wordCount && selector.scrollHeight > selector.clientHeight) { //テキストがトリミングする文字数より多い時かつ隠したテキストも含む要素の高さが隠したテキストを含まない要素の高さより大きい時
        str = text.substr(0, (wordCount - 1)); //1文字削る
        selector.innerText = str + clamp; //文末に3点リーダーをつける
      }
    }
  }
  textTrim();

【処理の流れ】
①要素の幅 / fontsize = 1行あたりに入る(全角文字の)文字数
②1行あたりに入る文字数 * 行数　=　表示できる(全角文字の)文字数
③テキストが指定した高さからはみ出た時の表示できる(全角文字の)文字数を取得
④③の中に半角文字が何文字あるか取得
⑤表示できる(全角文字の)文字数　＋　(④/2)・・・全角文字が後どのくらい入るかを計算
⑥⑤の文字数でトリミング

Discussion