リストの高さを揃える方法！

2022 6/14

2022年4月17日 2022年6月14日

たとえば横並びリストの際、
高さを揃えたいけど文字数に差があって揃えれない・・・
そんな悩みにあたることもあるかと思います！

解決方法はflexboxとか色々とありますが
今回はjQueryで文字数を制限してそれ以上になったら「…」で表示するで解決しようと思います！

比較的かんたんに実装できるよ！

まず始める前に

jQueryを使うので下記のCDNを読み込んできましょう！
記述場所は</body>の前ぐらいに望ましいです。

コードの紹介

HTMLとCSSは今回の記事に合わせてざっくり書きました！

See the Pen テキストカウンター by anno (@annyo) on CodePen.

$(function() {
  var count = 60;
  $('.text_limit li').each(function() {
      var thisText = $(this).text();
       var textLength = thisText.length;
        if (textLength &amp;amp;gt; count) {
           var showText = thisText.substring(0, count);
           var insertText = showText += '…';
           $(this).html(insertText);
       };
   });
 });

var count = 60;
文字数を60字までカウント

$(‘.text_limit li’).each(function() {
反映させたい箇所を設定
今回は、text_limitというクラス名のulの中にあるliタグを指定

var insertText = showText += ‘…‘;
60文字以上になるとそれ以降は「…」で表示する仕様