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

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

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

ゆうくん
比較的かんたんに実装できるよ!
スポンサーサイト

まず始める前に

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

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

コードの紹介

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

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

JS

$(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文字以上になるとそれ以降は「」で表示する仕様

最後に

今回の文字制限で「…」を表示する使用例として
ブログの記事一覧であったり、aタグ付きのブロックを横並びにしたとき
などに有効だと思います!
ゆうくん
状況に応じて使ってみてくださいっ!
最後までお読みくださりありがとうございました!!
このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^